纯CSS移动端折叠菜单生效关键在于结构顺序、隐藏方式和状态传递：input必须前置且同级，用sr-only隐藏而非hidden或display:none，label的for与input的id须严格匹配；max-height动画需预估高度并设overflow:hidden；iOS Safari需加will-change和焦点管理；媒体查询应双向控制显隐，z-index需合理设置。
纯 CSS 实现移动端折叠菜单，关键不是“能不能”，而是“怎么让 :checked 真正生效”——绝大多数失败案例，都卡在结构顺序、隐藏方式或状态传递这三步上。
为什么 peer-checked 不触发？结构和隐藏方式必须严格匹配
Tailwind 的 peer-checked:xxx 规则只对“前一个兄弟元素是 :checked 状态的 <input type="checkbox">”才起作用。常见失效原因：
-
<input>没放在<label>和<nav>的共同父容器内，或位置不在它们之前 - 用
hidden属性或display: none隐藏 checkbox —— 这会让它失去可访问性，:checked状态无法被 peer 识别 -
<label for="xxx">的for值和<input id="xxx">不完全一致（大小写、拼写、空格） - 在按钮上直接写
onclick切换 class，绕过了 checkbox，peer-checked完全不参与
正确做法：用 sr-only 类（或自定义 position: absolute; opacity: 0; width: 1px; height: 1px;）隐藏 checkbox，保留其表单语义和状态能力。
max-height 动画为何卡顿或截断？值要预估但不能硬编码
用 max-height 做展开收起动画时，max-height: 0 → max-height: 200px 是常用写法，但问题常出在：
立即学习“前端免费学习笔记（深入）”；
-
200px不够高，菜单项多时被overflow: hidden截断（尤其动态内容或字体缩放后） -
max-height: 1000px虽保险，但动画从 0→1000 插值会导致开头慢、结尾突兀 - 没设
overflow: hidden，展开时内容溢出，动画不可见
折中方案：max-height: 50rem（约 800px）+ transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1)，兼顾兼容性和视觉节奏。别用 height: auto，它无法过渡。
iOS Safari 上菜单闪一下？will-change 和焦点恢复缺一不可
在 iOS Safari 中，peer-checked 切换后菜单偶尔“闪一下”再出现，本质是渲染层未及时提升。单纯加 transform: translateZ(0) 效果有限，更可靠的是：
- 给菜单容器加
will-change: transform, opacity（仅在需要动画时启用，避免滥用） - 用 JS 在点击后手动调用
document.activeElement?.blur()，再nav.focus()，防止 Safari 因焦点残留触发重绘抖动 - 确保
transition写在菜单元素本身上，而不是父容器；且必须包含transition-property明确项，比如transition: opacity 0.3s, transform 0.3s
注意：will-change 是性能提示，不是修复手段。如果没加 transition 就写 will-change，反而可能降低性能。
桌面端菜单意外显示？媒体查询和断点类必须双向控制
很多人只写了 md:hidden 给汉堡按钮，却忘了把桌面端菜单也加上 md:flex，导致小屏下按钮消失、菜单也不见；或者反过来，大屏下汉堡按钮还挂着。真正安全的做法是：
- 汉堡按钮：只在移动端显示 →
lg:hidden（而非md:hidden，避免平板误判） - 桌面菜单：只在桌面端显示 →
hidden lg:flex（显式隐藏，再条件显示） - 折叠菜单容器：默认隐藏 + 移动端激活 →
hidden lg:block peer-checked:block
所有断点类必须成对出现，不能只靠一个方向的隐藏逻辑。LG 是 1024px 起，比 MD（768px）更稳妥，适配 iPad Pro 等设备。
最易被忽略的一点：折叠菜单的 z-index 必须高于页面其他内容，否则在滚动或有 fixed header 时会被遮挡；但又不能无脑设 9999——应配合 position: absolute 或 fixed，并确保父容器有 position: relative 形成层叠上下文。
