JQuery Toggle 在第一次单击时起作用，但不再起作用（如预期的那样）答案

【问题标题】：JQuery Toggle works on first click but not again (as expected)JQuery Toggle 在第一次单击时起作用，但不再起作用（如预期的那样）
【发布时间】：2012-02-25 02:06:17
【问题描述】：

我正在创建一个通过单击另一个元素来显示（切换）的 div。

当我点击一个锚点（#toggle-contents）时应该显示它，如果我点击同一个锚点或文档中的其他地方，它应该被隐藏。

我正在关注此操作指南中的代码：Creative overlay/popup with jQuery。

它在第一次被点击时正在工作，但不久之后它就会显示和隐藏。

标记：

<div id="block-header">
    <a id="trigger-contents">Toggle</a>
  </div>
  <div id="block-contents">
  </div>

javascript：

function registerToggleDiv( trigger, toggle )
{
  $( '#' + trigger ).click(function() 
    {
      $( '#' + toggle ).toggle(function() 
      {
        console.log('toggle');
        $(document).click(function(event) 
        {
          if ( !($(event.target).is('#' + toggle ) || 
                $(event.target).parents('#' + toggle ).length || 
                $(event.target).is( '#' + trigger ))) 
          {
            console.log('toggle hide');
            $('#' + toggle ).hide(500);
          }
        });
      });
    });
}
registerToggleDiv( 'trigger-contents', 'block-contents' );

与此处的其他切换问题相比，我试图找到错误，但没有找到任何提示。

感谢您的任何提示！

【问题讨论】：

你想做什么为什么不直接使用：$('#'+ toggle).toggle();这一行 $('#' + toggle ).hide(500);可能隐藏了它。
如何/在哪里初始化toggle 变量？
总结一下您的代码所做的事情：每次切换 'toggle' 时，它都会向文档添加一个 .click 事件处理程序，然后隐藏 'toggle' 元素。请说明你想让它做什么，因为你的愿望有点混乱。
感谢您的 cmets - 我更新了我的问题，希望它现在更有意义。

标签： javascript jquery toggle show-hide

【解决方案1】：

当您单击trigger 时，会发生传播，并且会触发文档onclick。

您正在绑定到文档onclick 事件：

$('#' + toggle ).hide(500);

你应该停止在点击元素中的传播，以防止文档点击如下：

$( '#' + trigger).click(function(e){
    e.stopPropagation();
});

【讨论】：