纯CSS的:hover在移动端失效是因为移动设备无持续悬停状态，仅桌面模拟时短暂触发，真机点击即失焦；必须用JavaScript控制显隐并同步ARIA状态、管理焦点流。
为什么纯CSS的 :hover 在移动端失效
因为移动设备没有持续的“悬停”状态，:hover 仅在模拟鼠标指针时短暂触发（比如 Safari 桌面版缩放后），真机上点开即失焦，子菜单闪退。这不是写法错，是浏览器规范限制——:hover 不是交互事件，无法绑定点击逻辑。
所以：纯 CSS 多级下拉在 iOS/Android 上基本不可用，除非你明确只支持桌面端且不关心触屏用户。
- 测试方法：
console.log监听:hover对应元素，真机点开无输出 - 替代方案必须引入 JavaScript 控制显隐，哪怕只是加个
class - 若仍想保留 CSS 动画，用
transition+ JS 切换is-open类即可
addEventListener('click') 怎么避免子菜单被意外关闭
直接给所有 .nav-item 绑 click，点子菜单项时会冒泡触发父级关闭逻辑，导致“刚点开就关”。关键是阻止事件穿透，同时区分点击目标是菜单 toggle 还是菜单内容。
- 只对带
data-toggle="dropdown"的按钮或链接绑定事件，不是整个li - 在 handler 里用
event.target.closest('.dropdown-toggle')精准判断是否点中了展开按钮 - 子菜单内部点击（如链接、按钮）要
event.stopPropagation()，否则会冒泡到父级document关闭监听器 - 推荐用事件委托：在
document监听click，再根据event.target分发逻辑，避免重复绑定
如何让键盘用户也能操作多级菜单
屏幕阅读器和 Tab 键导航依赖正确的 aria-expanded、aria-haspopup 和焦点管理。光靠 display: none 或 visibility: hidden 会让辅助技术忽略子菜单。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：父级
<button aria-expanded="false" aria-haspopup="true">，子菜单<ul aria-hidden="true"> - 展开时同步更新：
button.setAttribute('aria-expanded', 'true')，submenu.setAttribute('aria-hidden', 'false') - 展开后自动将焦点移到第一个可聚焦子项（
submenu.querySelector('a, button')），用focus() - 按
Esc键应关闭当前展开的菜单，且焦点回到触发按钮
移动端适配时要不要删掉 hover 样式
不要删，但得覆盖。iOS 上 :hover 虽不生效，但某些 Android 浏览器（如 Chrome）在“桌面模式”下会响应，留着能提升部分体验；关键是用媒体查询隔离触屏设备的交互逻辑。
- 用
@media (hover: hover) and (pointer: fine)包裹纯:hover样式，确保只在有精准指针的设备上启用 - 把 JS 控制的展开类（如
.is-open）样式写在外部，不依赖媒体查询，保证所有设备一致行为 - 触摸设备上，点击展开后，别让
:hover样式残留（比如背景色没清掉），需在 JS 中显式移除伪类影响：给body加touch-device类，CSS 里重置.nav-item:hover
真正麻烦的不是写几行 classList.toggle，而是处理焦点流、ARIA 状态同步、触摸反馈延迟、以及 Safari 对 position: absolute 子菜单的渲染抖动——这些细节不测真机根本发现不了。
