JQuery Toggle 在第一次单击时有效，但不再有效（如预期）

Question

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

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

我正在遵循此操作方法中的代码： 创意叠加/popup 与 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' );

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

感谢您的任何提示！

Answer 1

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

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

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

您应该停止在单击的元素中传播以防止文档单击，如下所示：

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