原生JS开发嵌套手风琴内层失效外层意外隐藏问题

你的代码有两个致命问题，直接导致嵌套手风琴失效：

• 全局选择器索引完全错位：getElementsByClassName会拿到页面中所有匹配类名的元素，内外层的.accordion--item、.accordion__content会按DOM从上到下的顺序混在同一个集合里，索引和父子关系完全不对应。点击内层手风琴项时，你写的「关闭所有索引不等于i的内容」逻辑，会直接匹配到外层父项的内容区，把它设为display: none。
• 互斥逻辑没有做层级隔离：你遍历关闭其他项的逻辑是针对全局所有手风琴项的，没有限定「只有同层级的兄弟项才需要互斥折叠」，内层的点击操作会直接修改外层元素的状态。
• 额外问题：你把点击事件绑在了整个.accordion--item容器上，哪怕加了e.stopPropagation()，也解决不了全局索引错位导致的误操作问题，而且点击内容区也会触发展开折叠，不符合常规交互逻辑。

核心原则是分层处理，手风琴的展开折叠逻辑只作用于同层级元素，不跨层级操作DOM：

1. 放弃全局索引匹配的写法，逐个处理每个独立的手风琴容器，内外层容器逻辑完全隔离
2. 点击时通过DOM父子关系查找当前项对应的内容区、同层级兄弟项，不依赖全局索引
3. 事件绑定在手风琴标题上，阻止冒泡避免内层点击触发外层逻辑

直接替换原有JS代码即可，CSS和HTML结构不需要做任何修改：

// 处理所有独立的手风琴容器，包括外层和嵌套层
document.querySelectorAll('.accordion, .accordion--nested').forEach(container => {
  // 仅获取当前容器下的直接子项，不包含深层嵌套的手风琴项
  const sameLevelItems = container.querySelectorAll(':scope > .accordion--item');

  sameLevelItems.forEach(item => {
    // 获取当前项的直接子标题和直接子内容区
    const itemTitle = item.querySelector(':scope > .accordion__title');
    const itemContent = item.querySelector(':scope > .accordion__content');

    itemTitle.addEventListener('click', (e) => {
      // 阻止事件冒泡，避免触发外层手风琴的点击逻辑
      e.stopPropagation();

      const currentOpenState = item.classList.contains('accordion--open');

      // 先折叠同层级的其他所有已展开项
      sameLevelItems.forEach(otherItem => {
        if (otherItem !== item) {
          otherItem.classList.remove('accordion--open');
          otherItem.querySelector(':scope > .accordion__content').style.display = 'none';
        }
      });

      // 切换当前项的展开/折叠状态
      if (currentOpenState) {
        item.classList.remove('accordion--open');
        itemContent.style.display = 'none';
      } else {
        item.classList.add('accordion--open');
        itemContent.style.display = 'block';
      }
    })
  })
})

写法说明 #

• 用:scope伪类确保只选择当前元素的直接子节点，不会误选深层嵌套的元素，从根源上避免内外层元素混淆
• 互斥折叠逻辑仅在同一个容器的同级项之间生效，不管嵌套多少层手风琴都不会互相干扰
• 修复了点击内容区触发展开/折叠的问题，交互更符合常规手风琴的使用习惯
• 不需要给内外层手风琴加不同的类名，后续新增嵌套层级也不需要修改JS逻辑

内容的提问来源于stack exchange，提问作者Jovan Jovanovic