Question

我正在创建一个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' );

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

感谢您的任何提示！

Answer 1

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

您绑定到文档onclick事件：

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

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

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

JQuery Toggle适用于第一次点击但不会再次（正如预期的那样）

1 个答案: