事件委托实现多级导航栏折叠的核心是监听父容器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> 或 <button> 里，只要它有正确属性即可

定位并切换对应子菜单

点击后，需找到它“控制”的那个下拉菜单。推荐用 data-target 指向目标元素 ID，或用 DOM 遍历找最近的 .submenu。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 若用 data-target="#submenu-1"：用 document.querySelector(targetValue) 获取目标
• 若无 data-target，可用 target.closest('li').querySelector('.submenu') 向上找父项再向下找子菜单
• 切换类名（如 collapsed）比直接操作 style.display 更灵活，方便配合 CSS 过渡动画

自动关闭其他展开项（可选）

如果希望“手风琴”效果（一次只展开一个），点击新项前先收起所有已展开的 .submenu.show。

立即学习“Java免费学习笔记（深入）”；

• 执行切换前，运行 document.querySelectorAll('.submenu.show').forEach(el => el.classList.remove('show'))
• 注意：避免影响当前正要操作的菜单，可在移除后再对目标执行 toggle
• 如需保留同级互斥但允许父子同时展开，就只收起「同级兄弟」的子菜单，而非全局

防止事件穿透和默认行为

某些情况点击会意外跳转或触发父级行为，需针对性拦截。

• 对按钮类元素（button、a 带 href="#"）调用 event.preventDefault()
• 用 event.stopPropagation() 阻止冒泡到更高层导航逻辑（如整个菜单的收起逻辑）
• 避免在 span 或伪元素上监听失败：确保点击目标是可交互元素，或用 closest() 扩展匹配范围