文档点击关闭切换功能答案

【问题标题】：toggle function with document click to close文档点击关闭切换功能
【发布时间】：2011-11-04 03:06:37
【问题描述】：

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

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

但是，当我在外部单击后再次单击该元素时，我将不得不单击两次，因为它并没有到最后的切换动作关闭。我如何做到这一点，这样当我在外部单击以关闭元素时，我不必单击元素两次。这有意义吗？

<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();
});

【问题讨论】：

标签： jquery function toggle document show-hide

【解决方案1】：

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

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

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

【讨论】：

似乎不起作用，$(document).click(function... 使它不起作用。我正在努力使它起作用
抱歉，我的代码中有几个错误。试试更新的代码
您还需要停止传播点击事件，否则点击会冒泡到文档并再次隐藏菜单。我已经更新了我的代码以包含它。

【解决方案2】：

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

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

【讨论】：