纯CSS响应式导航栏用checkbox实现：将隐藏的checkbox作为状态开关，通过:checked + .nav-menu控制菜单显隐，需确保HTML结构中input与.nav-menu同级且后者紧邻其后，配合max-height过渡或transform scaleY实现流畅动画。
怎么用 checkbox 触发导航栏展开/收起
纯 CSS 实现响应式导航栏开关，核心就是把 checkbox 当作隐藏的“状态开关”，用它的 :checked 状态联动控制菜单显示。不依赖 JS，但必须注意 DOM 顺序和选择器路径。
常见错误是菜单元素不在 checkbox 后面，或者用了 ~（通用兄弟选择器）却忽略了中间插了别的标签——CSS 无法跨父容器选中，只能靠相邻或后续兄弟关系。
-
checkbox必须和导航菜单在同一个父容器内，且菜单要在它之后 - 推荐用
+ .nav-menu（紧邻兄弟）而非~ .nav-menu，更可控 -
checkbox加display: none隐藏，别用visibility: hidden或opacity: 0，否则 iOS Safari 可能不触发状态变更
<label for="nav-toggle">☰</label> <input type="checkbox" id="nav-toggle"> <nav class="nav-menu">...</nav>
:checked + .nav-menu 为什么有时不生效
最常踩的坑是 HTML 结构断裂：比如 input 被包在 <div> 里，而 <code>.nav-menu 在外层；或者用了 flex 布局后视觉顺序和 DOM 顺序不一致，但 CSS 选择器只认 DOM 顺序。
另一个隐性问题是表单重置逻辑——如果页面有 <form></form> 包裹，刷新或重置时 checkbox 会回到未选中态，菜单自动关闭，这反而是合理行为，不是 bug。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具里
input元素是否真被勾选（看checked属性是否动态出现） - 避免在
input和菜单之间插入任何其他块级元素（如空<p></p>、<hr>） - 移动端点击区域太小？给
label加display: block和足够padding，别只靠文字触发
动画过渡加在哪儿才顺滑
直接对 max-height 或 height 做 transition 很容易卡顿或失效，因为 height: auto 无法被 CSS 动画识别。真正可行的是用 max-height 配合一个“足够大但不过分”的固定值，或者改用 transform: scaleY() + overflow: hidden。
- 别写
transition: height 0.3s—— 它对auto无效，且重排开销大 - 推荐方案：
max-height: 0→max-height: 400px（设为菜单最大可能高度），配合overflow: hidden - 更现代的做法：用
transform: scaleY(0)切换，性能更好，但需确保父容器有transform-origin: top
移动端点击失效或延迟怎么办
iOS Safari 和部分安卓 WebView 对 label 关联 input 的点击响应有兼容性问题，尤其当 label 是伪元素（::before）、或里面嵌了 svg 图标时，点击事件可能没传到 input。
这不是 CSS 问题，是事件捕获链断了。绕过方式很简单：把 for 属性换成显式包裹，或者补一层 cursor: pointer 和 -webkit-tap-highlight-color: transparent 消除点击反馈延迟。
- 优先用
<label><input type="checkbox">☰</label>包裹结构，比for更可靠 - 给
label加touch-action: manipulation，减少 300ms 延迟 - 避免在
label上设置pointer-events: none或父级设置了overflow: hidden截断事件流
checked 属性有没有动态更新、再确认下有没有意外的 pointer-events 或 transform 干扰了事件传递。
