JQuery Toggle可在第一次单击时工作，但不能再次单击(如预期）

JQuery Toggle works on first click but not again (as expected)

本文关键字：单击 但不能 Toggle 第一次 工作 JQuery      更新时间：2023-09-26

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

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

我正在遵循这个操作指南中的代码：使用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' );

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

谢谢你的提示！

单击trigger时，传播将发生，文档onclick将被激发。

您正在绑定文档onclick事件：

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

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

$( '#' + trigger).click(function(e){
    e.stopPropagation();
});
相关文章：