纯JavaScript多层折叠菜单问题：点击单个元素触发全局响应

嘿，我完全懂你现在的困扰——明明只想点一个菜单项，结果整个菜单都跟着动，这肯定不是你想要的效果！正如你猜测的那样，问题就出在你的事件处理函数里：你在函数里遍历了所有的dropdown、arrow和content元素，不管点击哪个菜单项，代码都会把所有相关元素的状态都改一遍，自然就出现了“全响应”的情况。而且你循环里的变量没有用let/const声明，变成了全局变量，这也会导致索引混乱的问题。

不用复制多个函数，我们只需要调整事件处理逻辑，让每个点击操作只针对当前被点击元素所属的那一组菜单就行，下面是修改后的完整代码和思路：

修改后的完整代码 #

HTML（无需改动） #

<div>
 <h2 class="accordion">Main 1<i class="accordionArrow"></i></h2>
 <h3 class="dropdown">Submenu 1<i class="dropdownArrow"></i></h3>
 <p class="content">Hello there. We are exposed.</p>
</div>
<div>
 <h2 class="accordion">Main 2<i class="accordionArrow"></i></h2>
 <h3 class="dropdown">Submenu 1<i class="dropdownArrow"></i></h3>
 <p class="content">Hello there. We are exposed again!</p>
</div>
<div>
 <h2 class="accordion">Main 3<i class="accordionArrow"></i></h2>
 <h3 class="dropdown">Submenu 1<i class="dropdownArrow"></i></h3>
 <p class="content">Hello there. We are exposed thrice!</p>
</div>

CSS（无需改动） #

body {
 margin: auto;
 width: 600px;
}
div {
 margin: auto;
}
.accordion {
 background-color: lightblue;
 color: white;
 padding: 3%;
 cursor: pointer;
 width: 300px;
 height: 50px;
}
.accordion .accordionArrow {
 border: solid white;
 border-width: 0 3px 3px 0;
 display: inline-block;
 padding: 3px;
 transform: rotate(45deg);
}
.dropdown {
 color: lightblue;
 padding-left: 3%;
 cursor: pointer;
 width: 300px;
 max-height: 0;
 overflow: hidden;
 transition-duration: 0.2s;
}
.dropdown .dropdownArrow {
 border: solid lightblue;
 border-width: 0 3px 3px 0;
 display: inline-block;
 padding: 3px;
 transform: rotate(45deg);
}
.content {
 font-weight: bold;
 transition: all 0.2s ease;
 padding-left: 5%;
 max-height: 0;
 overflow: hidden;
}

JavaScript（核心修改部分） #

// 绑定主菜单点击事件
document.querySelectorAll('.accordion').forEach(accordionItem => {
  accordionItem.addEventListener('click', function() {
    // 获取当前菜单所在的父容器（每个菜单组的div）
    const menuContainer = this.parentElement;
    // 只找当前容器内的子菜单和箭头
    const targetDropdown = menuContainer.querySelector('.dropdown');
    const targetArrow = this.querySelector('.accordionArrow');
    // 同时获取当前容器内的内容区域，收起主菜单时顺便收子菜单
    const targetContent = menuContainer.querySelector('.content');
    const subMenuArrow = menuContainer.querySelector('.dropdownArrow');

    // 切换主菜单状态
    if (targetDropdown.style.maxHeight) {
      targetDropdown.style.maxHeight = null;
      targetArrow.style.transform = null;
      // 同步收起子菜单
      targetContent.style.maxHeight = null;
      subMenuArrow.style.transform = null;
    } else {
      targetDropdown.style.maxHeight = targetDropdown.scrollHeight + 'px';
      targetArrow.style.transform = 'rotate(-135deg)';
    }
  });
});

// 绑定子菜单点击事件
document.querySelectorAll('.dropdown').forEach(dropdownItem => {
  dropdownItem.addEventListener('click', function(e) {
    // 阻止事件冒泡，避免点击子菜单时触发父菜单的点击事件
    e.stopPropagation();
    const menuContainer = this.parentElement;
    const targetContent = menuContainer.querySelector('.content');
    const targetArrow = this.querySelector('.dropdownArrow');

    // 切换子菜单内容状态
    if (targetContent.style.maxHeight) {
      targetContent.style.maxHeight = null;
      targetArrow.style.transform = null;
    } else {
      targetContent.style.maxHeight = targetContent.scrollHeight + 'px';
      targetArrow.style.transform = 'rotate(-135deg)';
    }
  });
});

关键改动说明 #

• 只操作当前菜单组：通过this.parentElement获取当前被点击元素所在的div容器，然后用querySelector只在这个容器内查找对应的子元素，确保每次点击只修改当前组的菜单状态，不会影响其他组。
• 利用this指向当前元素：事件处理函数里的this就是被点击的菜单项，直接用它来定位相关元素，不用再依赖全局循环索引。
• 阻止事件冒泡：子菜单点击时加上e.stopPropagation()，防止点击子菜单时触发父菜单的点击事件（浏览器默认的事件冒泡机制会导致这种情况）。
• 更简洁的遍历方式：用querySelectorAll配合forEach遍历元素，比原来的for循环更清晰，也避免了全局变量的问题。

这样修改后，你点击每个主菜单只会展开/收起对应的子菜单，点击子菜单也只会展开对应的内容，完全不会影响其他菜单组，而且代码更简洁可维护，不用复制多个函数~

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