嵌套折叠元素问题：首个<div>正常，第二个首次点击失效

问题原因 #

你遇到的问题源于事件监听使用了捕获模式（addEventListener第三个参数设为true），结合嵌套结构的事件传播逻辑，导致第二个可折叠头部的首次点击事件未正确触发类切换。捕获模式下事件从外层元素向内层传递，嵌套的可折叠结构会干扰首次加载时的事件处理流程，引发无响应问题。

解决方案 #

• 将事件监听改为冒泡模式（省略addEventListener第三个参数，或显式设为false，这是默认且更符合交互预期的模式）
• 使用e.currentTarget替代e.target，确保操作的是绑定事件的目标元素，避免意外的元素匹配问题
• 添加e.stopPropagation()阻止事件冒泡，避免嵌套结构的事件互相干扰

修改后的代码 #

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
  const found = document.querySelectorAll('.collapse-content .collapse-head-content');
  
  for (let i = 0, len = found.length; i < len; i++) {
    // 改为冒泡模式（省略第三个参数，默认即为false）
    found[i].addEventListener('click', handler);
  }

  function handler(e) {
    // 使用currentTarget确保操作绑定事件的元素
    const targetEl = e.currentTarget;
    const hidden = targetEl.classList.contains('hide-content');
    
    if (hidden) {
      targetEl.classList.remove('hide-content');
    } else {
      targetEl.classList.add('hide-content');
    }
    // 阻止事件冒泡，避免嵌套结构的干扰
    e.stopPropagation();
  }
});

CSS代码（无需修改）

.collapse-content .collapse-head-content::before {
  content: ' ^ ';
  cursor: pointer;
}

.collapse-content .hide-content.collapse-head-content::before {
  content: ' > ';
}

.collapse-content .hide-content.collapse-head-content~.collapse-body-content {
  display: none;
}

HTML代码（无需修改）

<div class="bank-details collapse-content">
  <div class="state-name collapse-head-content hide-content">
    Click me to collapse / show
  </div>
  <div class="collapse-body-content">
    <div class="collapse-content">
      <div class="district-name collapse-head-content hide-content">
        District
      </div>
      <div class="branch-name collapse-body-content">
        <a href="#">name</a>
        <a href="#">name</a>
        <a href="#">name</a>
      </div>
    </div>
  </div>
  <div class="state-name collapse-head-content hide-content">
    Click me to collapse / show
  </div>
  <div class="collapse-body-content">
    <div class="collapse-content">
      <div class="district-name collapse-head-content hide-content">
        District
      </div>
      <div class="branch-name collapse-body-content">
        <a href="#">name</a>
        <a href="#">name</a>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者vishnu kp