移动端多级菜单常见问题源于:hover模拟不一致、定位失准、事件冒泡冲突及300ms延迟，应改用JS控制显隐、fixed定位动态计算、层级隔离、touch-action优化，并同步URL状态。
移动端点击展开时子菜单闪退或不显示
常见现象是点击父级菜单后，display: none 切换瞬间完成又立刻恢复隐藏，或者根本没反应。根本原因不是 CSS 写错了，而是移动端浏览器对 :hover 的模拟行为不一致——很多安卓 WebView 和 iOS Safari 会把第一次点击当作 hover 触发，第二次才算 click，导致 CSS 类切换被覆盖或延迟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 彻底放弃依赖
:hover控制多级菜单显隐，改用 JavaScript 显式控制classList.toggle() - 给父级
<li>添加role="button"并监听click（不要用touchstart，避免和滚动冲突） - 在 JS 中调用
event.preventDefault()仅当目标是折叠/展开按钮时，避免误阻滚动 - 为子菜单添加
transition: max-height 0.2s ease-in-out，配合max-height: 0 / 500px实现平滑展开（不用display动画）
子菜单定位错位或遮挡内容
PC 上靠 position: absolute + top: 100% 能对齐，但移动端视口缩放、输入框弹起、地址栏收放都会让 offsetTop 计算失准，导致子菜单飘到屏幕外或盖住关键操作区。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 子菜单容器统一用
position: fixed，通过getBoundingClientRect()动态计算位置，而非依赖父元素 offset - 展开前检查视口底部剩余空间：
window.innerHeight - rect.bottom，若小于 200px，则将菜单向上展开（top: rect.top - menuHeight） - 给菜单加
z-index: 1000，但必须确保父容器没有transform或will-change，否则会创建新层叠上下文导致遮挡失效
嵌套层级超过两级就无法点击第三级
典型错误是给所有 <li> 统一绑定 click 事件，但事件冒泡时，第二级菜单的点击同时触发了第一级的关闭逻辑，第三级还没展开就被收起来了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只给带子菜单的父项（即含
data-has-children="true"的<li>）绑定展开逻辑 - 使用
event.stopPropagation()在子菜单内部点击时阻止冒泡，但仅限于非按钮区域；按钮类元素（如“返回上级”）仍需冒泡以便统一处理 - 用
dataset.level标记当前层级，JS 中判断：if (el.dataset.level === "2") { closeLevel(1); }，避免无差别关闭 - 移动端慎用
pointer-events: none隐藏子菜单——它会让 focus 状态丢失，影响键盘导航兼容性
iOS Safari 下点击无响应或需要双击
本质是 Safari 对 click 事件的 300ms 延迟未清除，且某些情况下 cursor: pointer 会干扰触摸判定。这不是 bug，是历史兼容策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
中加<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">，这是前提 - 给所有可点击菜单项加
touch-action: manipulation，比fastclick更轻量且原生支持 - 避免在菜单项上设置
outline: none后不提供替代焦点样式，否则 VoiceOver 用户无法识别当前焦点 - 测试时务必在真机 Safari 中验证，模拟器无法复现部分渲染时机问题
最易被忽略的是：菜单状态必须与 URL hash 或 history.state 同步。用户点开二级菜单后返回，再前进，菜单应保持展开态——这需要监听 popstate 并手动恢复 DOM 状态，不能只靠 CSS 类切换。
