JQuery的切换在第一次点击时有效，但之后无效（预期结果不符）

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' );

我尝试与其他切换问题进行比较以找到错误，但没有找到任何提示。

谢谢您提供的任何提示！

- Piezo Pea

---

你想做什么，为什么不直接使用：$('#'+ toggle).toggle(); 这一行代码$('#' + toggle ).hide(500); 可能正在隐藏它。 - Daniel

你是如何/在哪里初始化 toggle 变量的？ - Omid

总结一下你的代码所做的事情：每次“toggle”被切换时，它都会向文档添加一个“.click”事件处理程序，然后隐藏“toggle”元素。请明确说明你想要它做什么，因为现在你的需求有点令人困惑。 - Mark Schultheiss

谢谢您的评论 - 我更新了我的问题，希望现在更有意义了。 - Piezo Pea

Answer 1

当您点击trigger时，会发生事件传播并触发文档的onclick事件。

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

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

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

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

- Omid