本文详解如何使用 javascript 实现单击展开一个下拉菜单、同时自动收起其他已打开菜单的交互逻辑，解决传统 for 循环绑定事件导致的多开不互斥问题。
本文详解如何使用 javascript 实现单击展开一个下拉菜单、同时自动收起其他已打开菜单的交互逻辑，解决传统 for 循环绑定事件导致的多开不互斥问题。
在构建多级导航栏或下拉式菜单时，一个常见且关键的用户体验需求是：每次仅允许一个下拉项处于展开状态。若用户点击“Work”，则“Services”和“Learning”的下拉内容应自动收起；再次点击“Work”，则其自身也应关闭。原代码中因未维护当前激活状态，所有菜单项独立响应 click 事件，导致多个 .item.show 同时存在，破坏了交互一致性。
核心解决方案在于引入一个状态变量 openIndex，用于记录当前被展开的菜单索引（初始为 -1 表示无展开项）。在每个菜单项的 click 事件处理器中：
- 若点击的是主菜单项（非子标题
.sub-title或图标.fas），先检查是否已有其他项展开（openIndex !== -1 && openIndex !== i），如有则将其收起； - 再切换当前项的显示状态，并更新
openIndex—— 若当前已是展开态，则设为-1（即关闭）；否则设为i（即开启并标记为当前唯一展开项）； - 对子菜单（
.sub-title/.fas）点击，使用e.stopPropagation()阻止事件冒泡至window监听器，避免误触发全局收起逻辑。
以下是优化后的完整 JavaScript 实现（兼容原 HTML 结构）：
const menu = document.getElementsByClassName('menu');
const menucontent = document.getElementsByClassName('item');
const subTitle = document.getElementsByClassName('sub-title');
const subItem = document.getElementsByClassName('sub-item');
let openIndex = -1; // 全局跟踪当前展开项索引
for (let i = 0; i <p>✅ <strong>关键改进点说明：</strong> </p>
- 使用
e.target.closest(selector)替代多个matches()判断，提升可读性与健壮性（兼容嵌套子元素）； - 明确分离主菜单切换与子菜单展开逻辑，避免状态冲突；
-
openIndex作为单一可信源（Single Source of Truth），确保状态一致性； - 所有 DOM 操作均基于索引映射，无需修改 HTML 结构，平滑升级。
⚠️ 注意事项：
- 确保每个
.menu元素下严格对应一个.item、一个.sub-title和一个.sub-item，否则subItem[i]可能越界； - 若后续需支持键盘导航（如 ESC 关闭、方向键聚焦），建议将逻辑封装为类（Class-based Dropdown Manager）以增强可维护性；
- CSS 中
.item.show的定位依赖于父.menu的相对位置，请保持 HTML 层级结构稳定。
通过该方案，你将获得一个行为严谨、响应迅速、符合用户直觉的单展开下拉菜单系统，为复杂导航界面奠定坚实交互基础。
