手机端汉堡菜单点击无反应的主因是 aria-expanded 与 aria-controls 语义属性未正确配对：前者须置于按钮且值为 "true"/"false"，后者 id 必须与目标 nav 完全一致；应使用 classlist.toggle() 控制显隐类名，避免直接操作 style；遮罩关闭需用 e.target.closest('.overlay') 并设 tabindex="-1"；解决 ios 点击延迟需 viewport 含 user-scalable=no 且监听 click 而非 touchstart。
手机端汉堡菜单点击没反应？检查 aria-expanded 和 aria-controls 是否配对
很多导航折叠后点不了，不是 JS 写错了，而是语义属性没对上。浏览器和读屏器靠这两个属性联动菜单展开状态，漏一个或拼错 ID 就会断连。
-
aria-expanded必须写在汉堡按钮上，值为"true"或"false"，不能是字符串"true"以外的任意值（比如空字符串、"on"） -
aria-controls的值必须和目标<nav></nav>的id完全一致，大小写、连字符都不能差 - 别用
data-属性代替——JS 可以读，但可访问性 API 不认
用 classList.toggle() 切换类名，别直接操作 style.display
硬写 element.style.display = 'block' 看似快，但会覆盖 CSS 中的 display: flex 或媒体查询设置，导致响应式断层；而且无法触发 CSS 过渡动画。
- 统一用一个类名控制显隐，比如
nav-open，在 CSS 里写.nav-open { transform: translateX(0); opacity: 1; } - JS 里只调
navElement.classList.toggle('nav-open')，不碰style - 确保该类名在桌面断点下被
@media (min-width: 768px)覆盖掉，否则小屏展开后大屏也卡着开
点击遮罩层关闭菜单时，event.target 判定要小心
加个半透明遮罩（<div class="overlay">）是为了点击空白处收起菜单，但常有人写成 <code>if (e.target === overlay)，结果点到遮罩里的文字或图标就失效了。
- 改用
e.target.closest('.overlay')，兼容子元素点击 - 别忘了给遮罩加
tabindex="-1"，否则键盘用户按Tab会跳进一个不可聚焦又无意义的空层 - 遮罩的
z-index必须高于导航但低于弹窗类组件，否则可能盖住登录框之类的重要浮层
移动端点击延迟导致“点两下才生效”？禁用 touch-action: manipulation 不够
仅加 touch-action: manipulation 只能优化部分场景，真正在 iOS Safari 上解决 300ms 延迟，得配合 viewport 设置和事件监听方式。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">缺一不可，尤其user-scalable=no是关键开关 - 监听
click事件足够，别为了“更原生”去监听touchstart—— 容易引发点击穿透或误触 - 如果用了第三方库（如 Swiper），确认它没全局禁用
click，否则你的按钮监听会静默失效
aria-expanded 和类名切换的时机差一帧，屏幕阅读器就会报“菜单未响应”。
