Question

我在切换和记录功能时遇到问题，也许有人可以帮我改进功能。

我有一个可以打开和关闭元素的切换功能。如果单击该元素，则会打开该元素。然后，如果再次单击它，它将关闭，切换功能将起作用。然而，我进入了下一个级别，如果你单击元素，它将打开，如果你点击元素（文档）外，它会关闭。

但是，当我在外部点击后再次点击该元素时，我必须单击两次，因为它不会关闭最终的切换操作。我怎么做它所以当我点击外面关闭元素时，我不必再点击元素两次。这有意义吗？

<ul>
<li id='drop'>down</li>
<ul id='menu'>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>

$('li#drop').toggle(function () {
    //show its submenu
    $('ul', this).show();
}, function () {
    //hide its submenu
    $('ul', this).hide();
}
);
$(document).click(function(){
    $('ul#menu').hide();
});

Answer 1

toggle()存储被切换对象的数据，以便跟踪它的切换状态（因此它知道下次激活时调用哪个函数）所以当你更改对象的隐藏状态而不让{{1} 1}}更新该数据，它会混淆并在下次执行时调用错误的函数。

要解决此问题，您可能不应该使用toggle()，而只是自己实现切换行为，以便在从多个不同的地方调用时它可以正常工作。

Answer 2

而不是使用.toggle()，您可以测试点击li时ul是否可见

$('li#drop').click(function(e){
  e.stopPropagation();

  if($('ul#menu').is(':visible')) {
    $('ul#menu').hide();
  }
  else {
    $('ul#menu').show();
  }
});

切换功能，文档点击关闭

2 个答案: