JQuery切换在第一次单击时起作用，但不会再次起作用(如预期)

Question

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

它应该在我单击锚点(#toggle-contents)时显示，如果我单击相同的锚点或文档中的其他位置，则隐藏。

我遵循了how-to中的代码：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' );

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

谢谢你的任何提示！

Answer 1

当您单击trigger时，将发生传播并触发document onclick。

您正在绑定到document onclick事件：

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

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

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