用 checkbox 而不是 javascript 控制菜单显隐，是因为纯 css 方案可规避 js 加载失败、执行阻塞或被禁用导致菜单不可用的问题，同时减少重绘开销、动画更顺滑；但需确保 checkbox 可聚焦可点击，推荐用 position: absolute + opacity: 0 + pointer-events: none 隐藏，配合 label 正确关联，并用 :checked ~ .nav-menu 等兄弟选择器驱动动画。
为什么用 checkbox 而不是 JavaScript 控制菜单显隐
因为纯 CSS 方案能规避 JS 加载失败、执行阻塞或用户禁用 JS 导致菜单完全不可用的问题，同时减少重绘开销——checkbox 的 :checked 状态切换不触发 JS 事件循环，动画更顺滑。但要注意：它依赖表单控件的“可交互性”，所以必须保证 input[type="checkbox"] 可聚焦、可点击，不能被 display: none 或 visibility: hidden 彻底隐藏（否则屏幕阅读器和键盘用户会丢失操作入口）。
label 关联与视觉隐藏的正确写法
把 input 放在 label 内部最稳妥，或者用 for 属性绑定 id，确保点击文字/图标都能触发勾选。视觉上想“隐藏” checkbox 但保留功能，推荐用以下组合：
-
position: absolute+opacity: 0+pointer-events: none（避免遮挡下方元素） - 不要用
display: none—— 它会让元素脱离可访问树 - 如果用
clip-path或transform: scale(0)，需额外加aria-hidden="true"并确保label有明确语义
示例结构：
<label class="hamburger"> <input type="checkbox" id="menu-toggle"><span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </label>
:checked 如何驱动菜单展开与动画
核心是利用兄弟选择器（~）或相邻兄弟选择器（+）定位菜单容器。常见错误是写成 input:checked .menu——这无效，因为 input 和 .menu 通常不是后代关系。正确路径通常是：
-
#menu-toggle:checked ~ .nav-menu（当.nav-menu是input同级且在其后） - 动画需作用在
.nav-menu上，而非input；过渡属性如max-height、opacity、transform都可，但height: auto无法过渡，得用max-height配合足够大的值（如max-height: 500px） - 为防 Safari 对
max-height过渡的渲染抖动，建议加will-change: max-height到菜单元素
关键 CSS 片段：
.nav-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
#menu-toggle:checked ~ .nav-menu {
max-height: 500px;
opacity: 1;
}
移动端适配与可访问性陷阱
这个方案在 iOS Safari 和 Android Chrome 上基本稳定，但有三个硬伤常被忽略：
- 双击缩放问题：iOS 默认允许双击缩放
input区域，需在meta viewport中加user-scalable=no（谨慎！影响整体可读性），或给label加-webkit-tap-highlight-color: transparent - 键盘导航失效：若没给
input设置tabindex="0"，键盘用户按 Tab 键无法聚焦到汉堡按钮 - 焦点管理缺失：菜单展开后，焦点不会自动跳入菜单项，需用
focusable属性配合 JS 补救——纯 CSS 方案对此无解，这是它的天然边界
真正在生产环境用，得接受一个事实：CSS 切换菜单只是“降级可用”，无障碍体验仍需 JS 做焦点流控制和状态同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
