如何用JavaScript实现一个下拉菜单组件_如何管理打开状态和键盘导航？

下拉菜单需用布尔状态变量同步aria-expanded和hidden属性，点击切换状态并管理焦点；键盘支持Enter/Space展开、Escape关闭、方向键循环导航、Tab自然进出；菜单常驻DOM，用hidden或aria-hidden控制可访问性，关闭时焦点回归按钮。

用 JavaScript 实现下拉菜单，核心是控制 打开/关闭状态 和支持 键盘导航（Tab、Enter、Escape、方向键）。状态管理要可靠，键盘交互要符合可访问性（WCAG）规范，比如用 aria-expanded、aria-haspopup、焦点管理等。

状态管理：用布尔值 + 属性同步

不要只靠 CSS 类或 display 切换，而应维护一个明确的打开状态，并同步到 DOM 属性和 ARIA：

• 用一个变量（如 isOpen）或组件实例属性跟踪状态
• 点击按钮时切换状态，并更新：
  button.setAttribute('aria-expanded', isOpen)
menu.setAttribute('hidden', !isOpen)（或用 aria-hidden）
• 菜单显示时，自动将焦点移到第一个可聚焦子项（如第一个 <a></a> 或 <button></button>），保证键盘用户能立刻操作

键盘导航：按标准行为响应关键按键

在菜单容器（或按钮）上监听 keydown，根据按键做对应操作：

• Enter / Space：在按钮上触发展开/收起；在菜单内项上触发点击
• Escape：无论焦点在哪，都立即关闭菜单并把焦点移回按钮
• ArrowDown / ArrowUp：在菜单打开时，循环切换焦点到下一个/上一个可聚焦项（可用 menu.querySelectorAll('a, button') 获取）
• Tab：默认行为即可 —— 进入菜单时 Tab 进入第一项，Shift+Tab 回退到按钮；菜单关闭时 Tab 跳过整个菜单区域

焦点与隐藏逻辑：避免“焦点丢失”陷阱

常见问题：菜单关闭后焦点消失，或菜单隐藏但未设 aria-hidden="true"，导致屏幕阅读器仍读取内容：

标签： css javascript java 常见问题