下拉菜单需用布尔状态变量同步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） - 菜单显示时，自动将焦点移到第一个可聚焦子项（如第一个
或），保证键盘用户能立刻操作
键盘导航：按标准行为响应关键按键
在菜单容器（或按钮）上监听 keydown，根据按键做对应操作：
- Enter / Space：在按钮上触发展开/收起；在菜单内项上触发点击
- Escape：无论焦点在哪，都立即关闭菜单并把焦点移回按钮
-
ArrowDown / ArrowUp：在菜单打开时，循环切换焦点到下一个/上一个可聚焦项（可用
menu.querySelectorAll('a, button')获取） - Tab：默认行为即可 —— 进入菜单时 Tab 进入第一项，Shift+Tab 回退到按钮；菜单关闭时 Tab 跳过整个菜单区域
焦点与隐藏逻辑：避免“焦点丢失”陷阱
常见问题：菜单关闭后焦点消失，或菜单隐藏但未设 aria-hidden="true"，导致屏幕阅读器仍读取内容：
立即学习“Java免费学习笔记（深入）”；
- 菜单元素始终保留在 DOM 中，用
hidden或aria-hidden控制语义可见性 - 关闭菜单时，确保焦点回到触发按钮（
triggerButton.focus()） - 用
mousedown或pointerdown防止点击菜单外部时意外触发两次关闭（配合event.stopPropagation()在菜单内部） - 监听
click在 document 上关闭菜单，但先判断event.target是否在菜单或按钮内，否则关闭
可选增强：用 roving tabindex 提升无障碍体验
对菜单项使用动态 tabindex 管理（仅当前聚焦项为 0，其余为 -1），让键盘导航更精准：
- 初始时所有菜单项
tabindex="-1" - 焦点进入菜单后，给第一个项设
tabindex="0"并 focus 它 - 方向键切换时，移除前一项的
tabindex="0"，设为-1，再给目标项设0并 focus - 这样既保持 Tab 键只进不出（不把每个菜单项都纳入 Tab 顺序），又支持方向键高效导航
基本上就这些。不复杂但容易忽略细节 —— 关键是状态同步、焦点可控、键盘路径清晰、ARIA 属性准确。写完可以用 Chrome 的 Lighthouse 或屏幕阅读器快速验证一遍。
