事件委托实现多级导航栏折叠的核心是监听父容器click事件，通过event.target.matches('[data-toggle="collapse"]')识别触发元素，再依data-target或dom遍历定位对应子菜单并切换show类；支持任意嵌套、自动扩展、手风琴模式及事件防穿透。
事件委托处理多级导航栏的折叠点击，核心是利用事件冒泡，把点击监听绑定在父容器上，通过 event.target 判断是否点中了触发折叠的元素（比如带 data-toggle="collapse" 的按钮或箭头），再操作对应子菜单的显示/隐藏状态。
绑定一次监听，覆盖所有层级
不要给每个折叠按钮单独加 addEventListener，而是监听整个导航容器（如 .nav-menu）。这样新增的子菜单项无需重新绑定，也避免重复监听。
- 选择最外层稳定容器，例如：
document.querySelector('.nav-sidebar') - 监听
click事件，用event.target.matches('[data-toggle="collapse"]')精准识别触发元素 - 支持任意嵌套层级：按钮可能在
<li>、<span></span>或<button></button>里，只要它有正确属性即可
定位并切换对应子菜单
点击后，需找到它“控制”的那个下拉菜单。推荐用 data-target 指向目标元素 ID，或用 DOM 遍历找最近的 .submenu。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 若用
data-target="#submenu-1"：用document.querySelector(targetValue)获取目标 - 若无
data-target，可用target.closest('li').querySelector('.submenu')向上找父项再向下找子菜单 - 切换类名（如
collapsed）比直接操作style.display更灵活，方便配合 CSS 过渡动画
自动关闭其他展开项（可选）
如果希望“手风琴”效果（一次只展开一个），点击新项前先收起所有已展开的 .submenu.show。
- 执行切换前，运行
document.querySelectorAll('.submenu.show').forEach(el => el.classList.remove('show')) - 注意：避免影响当前正要操作的菜单，可在移除后再对目标执行
toggle - 如需保留同级互斥但允许父子同时展开，就只收起「同级兄弟」的子菜单，而非全局
防止事件穿透和默认行为
某些情况点击会意外跳转或触发父级行为，需针对性拦截。
- 对按钮类元素（
button、a带href="#"）调用event.preventDefault() - 用
event.stopPropagation()阻止冒泡到更高层导航逻辑（如整个菜单的收起逻辑） - 避免在
span或伪元素上监听失败：确保点击目标是可交互元素，或用closest()扩展匹配范围
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
