最简纯CSS折叠菜单方案是用隐藏的checkbox配合:checked伪类控制导航栏显隐，关键在于正确结构（input与menu同级）、选择器匹配（+或~）、max-height过渡及可访问性优化。
用 checkbox + :checked 控制导航栏显隐最简方案
纯 CSS 实现折叠菜单，不依赖 JS 的核心就是利用 checkbox 的勾选状态触发样式切换。关键不是“怎么写动画”，而是“怎么让点击不影响表单语义且能稳定触发”。
常见错误是直接把 input[type="checkbox"] 写在导航外、或用 display: none 隐藏后导致 :checked 失效（部分旧版 Safari 会跳过渲染隐藏的 checkbox 状态）。
- 把
input放在nav同级或内部，紧邻label和菜单容器 - 用
position: absolute; opacity: 0; pointer-events: none;隐藏 checkbox，保留可触发性 - 用
label[for="xxx"]关联，或把label包住input（更稳妥） - 切换逻辑靠
input:checked ~ .menu或input:checked + .menu，注意兄弟/后续兄弟选择器的限制
~ 和 + 在菜单显示逻辑中的实际区别
选择器写法直接决定 HTML 结构能否跑通。很多人卡在这步：点了没反应，其实是结构和选择器不匹配。
+ 只能选中「紧邻的下一个兄弟元素」，~ 可选中「后续所有同级兄弟元素」。对导航栏来说，这意味着：
立即学习“前端免费学习笔记（深入）”；
- 如果菜单
.menu紧跟在input后面 → 用input:checked + .menu - 如果中间插了汉堡图标
.hamburger标签 → 必须用input:checked ~ .menu - 若菜单放在
nav内部，而input在外部，则两种都无效，得调整结构或换思路（比如用:has()，但兼容性差）
示例结构（推荐）：
<input type="checkbox" id="nav-toggle"> <label for="nav-toggle"></label> <nav class="menu"><ul>...</ul></nav>对应样式：
input#nav-toggle:checked ~ .menu { max-height: 500px; }
折叠时用 max-height 过渡比 display 更靠谱
display: none ↔ block 无法过渡，硬加 transition 没效果。这是新手最常踩的坑——以为写了 transition 就自动动起来。
真正可过渡的属性只有那些有中间状态的，比如 max-height、opacity、transform。其中 max-height 最实用，因为能配合内容高度自适应：
- 关闭时设
max-height: 0，并加overflow: hidden - 展开时设一个「足够大但不过分夸张」的值，比如
max-height: 300px（比最大可能菜单高即可） - 避免用
height: 0 ↔ auto，auto无法参与过渡 - 若菜单项含图片或字体加载延迟，初始
max-height不够会截断，可加padding-bottom: 1px触发重排微调
移动端点击穿透、焦点丢失与可访问性补救
纯 CSS 方案在真实设备上容易出两个隐形问题：点一次没反应（被浏览器当作滑动）、键盘 Tab 到菜单后按空格无法切换（checkbox 没获得焦点）。
根本原因不是代码写错，而是浏览器对非 button 元素的点击/聚焦策略不同：
- 给
label加cursor: pointer和-webkit-tap-highlight-color: transparent减少 iOS 点击延迟 - 确保
label有明确尺寸（哪怕只是width: 44px; height: 44px），否则某些安卓机点不中 - 菜单容器加
tabindex="-1"，并在input:checked时设visibility: visible而非仅opacity: 1，否则屏幕阅读器可能忽略 - 不要用
pointer-events: none在菜单上，它会阻断键盘聚焦
复杂点在于：视觉上要“收起”，但 DOM 里菜单必须始终存在、可聚焦、可读取。删掉或 display: none 它，就等于对辅助技术说“这儿什么都没有”。
