用事件委托简化菜单收起逻辑：只监听父容器点击事件，通过event.target.closest()识别触发元素，结合data属性标记层级，CSS类控制显隐，避免重复绑定和硬编码DOM结构。
在菜单导航中用事件委托简化收起逻辑，核心是：**只监听父容器的点击事件，通过事件目标（event.target）判断是否点中了触发收起的元素（比如菜单项、折叠按钮），再统一处理展开/收起状态，避免给每个子项单独绑定事件。**
监听父容器，用 closest() 判断点击位置
把所有菜单项（<li>）、标题（<h3>）、折叠按钮（<button class="toggle">）都包在一个容器里（如 <nav id="main-menu">），然后只给这个容器绑定一次点击事件：
document.getElementById('main-menu').addEventListener('click', function (e) {
const toggleBtn = e.target.closest('.toggle');
const menuItem = e.target.closest('li[data-menu]');
if (toggleBtn) {
// 点击折叠按钮：切换对应子菜单显隐
const targetId = toggleBtn.dataset.target;
const submenu = document.getElementById(targetId);
if (submenu) submenu.classList.toggle('hidden');
} else if (menuItem && menuItem.hasAttribute('data-menu')) {
// 点击菜单项：收起其他同级展开项（可选）
const allOpen = this.querySelectorAll('ul:not(.hidden)');
allOpen.forEach(el => el.classList.add('hidden'));
}
});
用自定义属性标记层级关系，避免硬编码 DOM 结构
给菜单结构加上语义化属性，让逻辑更健壮：
- 用
data-menu-group="main"标记一级菜单组 - 用
data-submenu-for="products"标记子菜单归属哪个主项 - 用
data-toggle标记可点击的折叠触发器
这样收起逻辑就能按组操作，例如点击“产品”菜单项时，自动收起所有 data-submenu-for="products" 的子菜单，不依赖具体 HTML 嵌套深度。
立即学习“Java免费学习笔记（深入）”；
收起其他展开项时，排除当前操作目标
常见需求是“点击一个菜单，收起其他已展开的子菜单”。用事件委托实现时，注意别误收自己：
if (toggleBtn) {
const targetId = toggleBtn.dataset.target;
const currentSubmenu = document.getElementById(targetId);
// 收起所有其他展开的子菜单（排除当前）
document.querySelectorAll('ul.submenu:not(.hidden)').forEach(sub => {
if (sub !== currentSubmenu) sub.classList.add('hidden');
});
currentSubmenu.classList.toggle('hidden');
}
配合 CSS 类控制显隐，避免直接操作 style.display
推荐用 hidden 或 is-collapsed 这类 CSS 类来管理状态，例如：
.submenu { transition: max-height 0.2s ease-out; }
.submenu.hidden { max-height: 0; overflow: hidden; }
.submenu:not(.hidden) { max-height: 500px; }
这样既支持动画，又便于用 JS 统一增删类，也方便后续用 CSS 媒体查询适配移动端收起行为。
