if语句内addEventListener导致toggle点击切换失效的解决方法

云上老周

2026-8-30

问题根因

你的代码有3个核心错误，导致toggle逻辑失效：

if条件判断写错：if (toggle.style.display = "none") 里用了单等号=，这是赋值操作不是比较操作，这个判断永远为真，永远进显示分支，根本走不到else的隐藏逻辑。
没有阻止事件冒泡：点击.head元素时，点击事件会顺着DOM树向上冒泡到document，你刚把toggle设为显示，冒泡触发的document点击回调会立刻把它设为隐藏，视觉上就像点击完全没生效。
重复绑定事件：你把document的点击监听写在了if分支里，每次点.head都会给document新增一个重复的点击回调，点击次数越多绑定的回调越多，逻辑会彻底混乱。

修复方案

把if里的赋值改成相等判断===
document的外部点击隐藏逻辑只在页面初始化时绑定1次，不要写在元素点击回调内部
点击.head时阻止事件冒泡，避免触发document的隐藏回调
点击.toggle内部区域时也要阻止冒泡，避免点内容区的时候把面板误隐藏

修复后完整代码

JS代码

$(document).ready(function() {
  // 全局仅绑定一次外部点击隐藏逻辑
  document.addEventListener('click', function() {
    $('.toggle').hide();
  })

  // 头部点击切换显隐逻辑
  $(document).on('click', '.head', function(e) {
    // 阻止事件冒泡，避免触发document层的隐藏回调
    e.stopPropagation();
    const toggle = $(this).find('.toggle')[0];
    // 基于当前display状态切换
    toggle.style.display = toggle.style.display === "none" ? "block" : "none";
  })

  // 点击toggle内容区时阻止冒泡，不会误触发隐藏
  $(document).on('click', '.toggle', function(e) {
    e.stopPropagation();
  })
})

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="head">expand
    <div class="toggle" style="display:none;">
      <p>number 1</p>
      <p>number 2</p>
    </div>
  </div>
</div>