点击折叠菜单某一项时只展开或收起自身，关键在于用event.stoppropagation()阻止事件冒泡，并将监听器绑定到专属触发按钮（如.toggle-btn）而非容器；委托监听时需用e.target.closest()精准定位目标，避免误触发父级或子项。
在折叠菜单中，点击某一项时只展开或收起它自己，而不是触发父级或其他项的响应，关键在于阻止事件冒泡，并确保事件监听逻辑绑定在正确的元素上。
用 event.stopPropagation() 阻止冒泡
折叠菜单通常用嵌套结构（如 ul > li > ul），点击子菜单标题时，事件可能向上冒泡到父 li 或整个菜单容器，导致多层展开/收起。在点击处理函数中调用 event.stopPropagation() 可立即中断冒泡路径：
document.querySelectorAll('.menu-item > .toggle-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation(); // ✅ 关键：阻止事件传给父级
const submenu = this.nextElementSibling;
if (submenu && submenu.classList.contains('submenu')) {
submenu.classList.toggle('open');
}
});
});
委托监听时精准定位目标元素
如果使用事件委托（比如监听整个菜单容器），必须通过 e.target 准确判断是否点中了“可折叠项”的触发按钮，再阻止冒泡：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
document.querySelector('.accordion-menu').addEventListener('click', function(e) {
const toggleBtn = e.target.closest('.toggle-btn'); // ✅ 只匹配真正点击的按钮
if (!toggleBtn) return;
e.stopPropagation(); // ✅ 在确认是目标后才阻止
const item = toggleBtn.closest('.menu-item');
item.classList.toggle('expanded');
});
避免误绑在容器或通用 class 上
常见错误是把点击监听器加在 .menu-item 容器上，而该容器又包裹了子菜单——一旦子菜单也带 .menu-item 类，点击子项就会触发两层 handler。建议：
- 触发折叠行为的元素用专属 class，如
.toggle-btn或.collapse-trigger - 菜单项容器用
.menu-item，但不直接监听它的 click - 子菜单内容区域不响应折叠事件（比如链接、文字段落不加
click监听）
补充：用 event.stopImmediatePropagation() 防多重绑定
如果同一元素被多次绑定 click 处理函数（例如框架 + 手写脚本共存），仅 stopPropagation 不够，还需 stopImmediatePropagation 确保当前 handler 执行后，同级其他 handler 不再运行：
btn.addEventListener('click', function(e) {
e.stopImmediatePropagation(); // ✅ 比 stopPropagation 更彻底
// ... 展开/收起逻辑
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
