本文介绍如何通过维护当前打开菜单索引状态，结合事件委托与 stopPropagation，实现多级下拉菜单的单开（accordion-style）交互逻辑，确保每次仅有一个下拉内容可见。
本文介绍如何通过维护当前打开菜单索引状态，结合事件委托与 stoppropagation，实现多级下拉菜单的单开（accordion-style）交互逻辑，确保每次仅有一个下拉内容可见。
在构建响应式导航栏时，常见需求是：点击任一菜单项展开其子内容，同时自动收起其他已展开的菜单——即“单开模式”（类似手风琴效果）。原始代码中使用 for 循环为每个 .menu 绑定点击事件，但未协调各菜单状态，导致多个 .item.show 同时存在；此外，全局 window.click 监听器中的 i 变量因闭包问题始终指向循环末尾索引，造成误操作。
✅ 核心解决方案：状态追踪 + 事件隔离
我们引入一个全局变量 openIndex 记录当前激活菜单的索引（初始为 -1 表示无打开项），并在每次点击时：
- 若点击的是主菜单项（非子标题/图标），先关闭上一个打开的菜单（若存在且非当前项），再切换当前项；
- 若点击的是子标题（
.sub-title）或下拉图标（.fas），调用e.stopPropagation()阻止事件冒泡至window，避免触发全局关闭逻辑； - 全局
window.click仅在点击区域完全脱离菜单结构时，统一收起当前打开项。
以下是优化后的完整 JavaScript 实现：
const menu = document.querySelectorAll('.menu');
const menucontent = document.querySelectorAll('.item');
const subTitle = document.querySelectorAll('.sub-title');
const subItem = document.querySelectorAll('.sub-item');
let openIndex = -1; // 当前展开的菜单索引，-1 表示无展开项
menu.forEach((item, i) => {
item.addEventListener('click', (e) => {
const isSubmenuToggle = e.target.matches('.sub-title') || e.target.matches('.fas');
if (isSubmenuToggle) {
e.stopPropagation(); // 关键：阻止冒泡，避免触发 window.click 的关闭逻辑
subItem[i]?.classList.toggle('present');
subTitle[i]?.classList.toggle('clear');
return;
}
// 处理主菜单点击：关闭前一个，打开当前（如未打开则关闭）
if (openIndex !== -1 && openIndex !== i) {
menucontent[openIndex].classList.remove('show');
menu[openIndex].classList.remove('darkgrey');
}
menucontent[i].classList.toggle('show');
menu[i].classList.toggle('darkgrey');
openIndex = menucontent[i].classList.contains('show') ? i : -1;
});
});
// 全局点击收起：点击菜单区域外时关闭当前展开项
window.addEventListener('click', (e) => {
const isOutsideMenu = !e.target.closest('.menu') &&
!e.target.closest('.item') &&
!e.target.closest('.sub-title') &&
!e.target.closest('.fas');
if (isOutsideMenu && openIndex !== -1) {
menucontent[openIndex].classList.remove('show');
menu[openIndex].classList.remove('darkgrey');
openIndex = -1;
}
});
⚠️ 注意事项与最佳实践
-
优先使用
querySelectorAll而非getElementsByClassName：前者返回静态 NodeList，避免动态集合在循环中引发的索引错位风险； -
e.stopPropagation()不可省略：子菜单切换（如.sub-title）必须拦截事件传播，否则会立即被window.click监听器捕获并强制关闭； -
空值防护：对
subItem[i]和subTitle[i]使用可选链?.，防止 DOM 元素缺失时报错； -
CSS 类名一致性：确保
.show、.darkgrey、.present、.clear在样式表中定义正确，且.item { display: none }是默认隐藏规则； -
移动端兼容性：如需支持触摸设备，建议补充
touchstart事件监听或使用pointerdown替代click。
通过该方案，菜单交互变得健壮、可预测：任意时刻最多一个下拉面板处于展开状态，用户操作意图清晰，体验更接近原生应用逻辑。
