采用事件委托统一监听根容器，用 data-toggle="dropdown" 精准识别触发项，通过 nextelementsibling 或 queryselector 定位子菜单，css 使用 > 子选择器控制层级显示，js 仅切换 active 类并维护 currentopen 实现单开互斥。
统一监听根容器，避免重复绑定
把 click 事件监听器直接加在菜单最外层容器上，比如 ul#main-menu 或 nav.site-nav，不要给每个菜单项单独绑定事件。这样即使后续动态插入新菜单项（如通过 AJAX 加载子分类），也不用重新绑定或清理旧监听器。确保容器有明确标识，例如添加 id="main-menu" 或 data-role="dropdown-menu"，方便 JS 精准捕获。
精准识别触发按钮与对应子菜单
点击发生后，用 event.target.closest('[data-toggle="dropdown"]') 找到真正被点击的可展开项，再通过 DOM 关系定位其子菜单区域：
- 子菜单紧邻按钮时，用 nextElementSibling 获取（推荐，性能高、结构清晰）
- 若结构不规则，可用 querySelector('.submenu, .nested-menu')，但需确保类名语义一致、不与 CSS hover 规则冲突
- 为所有可展开项统一加 data-toggle="dropdown"，比依赖 class 更灵活，也便于未来扩展
逐级独立控制，防止连锁展开
多级菜单的关键是“只影响直接子级”，否则点一级菜单会意外展开所有嵌套内容。CSS 中必须使用子选择器 >：
-
.menu-item.active > ul —— 仅显示被点击项的直系
ul，孙级、曾孙级保持隐藏 - .menu-item.active > .arrow —— 旋转图标也只作用于当前层级，避免样式污染
- JS 切换时只操作 classList.toggle('active')，不手动改
style.display
处理互斥与误触发场景
如果需求是“同一时间只开一个菜单”，需要维护当前激活项引用，并在新点击时关闭旧项：
- 定义变量 let currentOpen = null，每次点击先检查并移除 currentOpen?.classList.remove('active')
- 点击后更新 currentOpen = clickedItem
- 开头加守卫逻辑：if (event.target.matches('a, input, button, [contenteditable]')) return，防止点到链接或复选框误触发折叠
- 按钮内含 SVG 图标时，在 CSS 中设 svg { pointer-events: none; }，确保点击穿透到按钮本身
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
