移动端汉堡菜单问题根源在于html结构和css定位未对齐响应式逻辑：必须用语义化嵌套（父li包裹子ul并加has-submenu类），子菜单需为父li直接子元素；css中submenu须设position:static回归文档流，禁用top/left，改用margin/padding控制间距。
移动端汉堡菜单能正常展开，但点击后不收起、子菜单错位、键盘无法关闭——这些问题不是 JS 写错了，而是 HTML 结构或 CSS 定位没对齐响应式逻辑。
HTML 必须用语义化嵌套结构，不能平铺 li
很多人的导航在小屏下“展开空白”或“二级菜单消失”，根源是把所有 li 写成同级，没表达父子关系。浏览器无法识别哪个是父项、哪个是子项，CSS 的 :hover 或 JS 的 active 就找不到作用目标。
- 错误写法：
<li>Link 1</li> <li>Link 2</li> <li>Link A</li>（全部平级） - 正确写法：父
li包裹子ul，并加class="has-submenu"标记：<li class="has-submenu">Link 2<i>▼</i><ul class="submenu"><li>Link A</li></ul> </li> - 子菜单
ul.submenu必须是父li的直接子元素，不能是兄弟节点；否则.has-submenu.active > .submenu这类选择器完全不生效
CSS 中 position: static 是移动端下拉菜单不“飞走”的关键
桌面端下拉常用 position: absolute 实现悬浮效果，但一到移动端，这个绝对定位会让子菜单脱离文档流，出现在屏幕任意位置（比如顶部、右侧、甚至看不见）。这不是 bug，是 CSS 行为本身。
- 小屏下必须重置：对
.submenu显式设置position: static，强制它回归文档流 - 同时移除
top/left等定位偏移，改用margin-top或padding控制间距 - 若需全宽展开，给
.submenu加width: 100%和box-sizing: border-box，避免滚动条意外出现
JS 只管切换状态，别碰样式判断
常见错误是 JS 里写 if (window.innerWidth 去控制显示逻辑。这会导致窗口缩放时行为错乱，而且和 CSS 媒体查询脱节。
- JS 唯一职责：监听按钮点击，用
classList.toggle("active")切换.has-submenu或.nav-menu上的类名 - 所有显隐逻辑交给 CSS 媒体查询：比如
@media (max-width: 768px) { .nav-menu ul:not(.active) { display: none; } } - 必须补上键盘支持：监听
Escape键关闭菜单，菜单展开时用focus()聚焦首个可聚焦元素（如第一个a或button）
aria-expanded 不只是可访问性装饰，它直接影响现代 CSS 选择器行为
Chrome/Safari 新版支持 :has()，比如 nav:has(.hamburger[aria-expanded="true"]) .submenu。如果你没设这个属性，这类选择器直接失效——不是语法错，是条件不满足。
- 每次 JS 切换
active类时，同步更新按钮的aria-expanded值：btn.setAttribute("aria-expanded", "true") - 初始状态要一致：按钮默认
aria-expanded="false"，对应菜单默认隐藏 - 别漏掉
aria-label：汉堡按钮必须有aria-label="Toggle navigation"，否则屏幕阅读器读不出功能
真正难的不是写动画或加图标，而是让 HTML 的嵌套层级、CSS 的定位上下文、JS 的状态管理三者在不同断点下始终对齐。一旦其中一个脱节，菜单就可能“展开即消失”“点击无反应”或“只在鼠标悬停时工作”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
