纯CSS实现移动端响应式导航栏需用<input type="checkbox">作状态源，配合peer与peer-checked控制同级相邻<nav>显隐；iOS Safari闪动问题可通过max-h-0/peer-checked:max-h-96或will-change: transform, opacity优化，且须补充JS恢复焦点以保障可访问性。
移动端菜单需要点击触发，但Tailwind没有内置“点击切换”逻辑
Tailwind 本身不处理 JavaScript 交互，peer 类只能响应兄弟元素的伪状态（如 :checked），不能监听 click。所以必须借助一个隐藏的 checkbox 控件来“桥接”用户点击和样式切换——这是实现纯 CSS 响应式导航栏的核心前提。
常见错误是直接给按钮加 onclick 然后操作 class，这会绕过 peer 机制，导致后续的 peer-checked:xxx 规则完全不生效。
- 把
<input type="checkbox">放在<button>和<nav>的共同父容器内，且位于它们之前 - 用
sr-only或自定义hidden类隐藏它，但不能用hidden属性或display: none（会破坏 :checked 可访问性） - 按钮的
for属性必须精确匹配 checkbox 的id
如何用 peer + :checked 控制菜单显隐
关键在于结构顺序和状态传递：checkbox 是 peer，导航菜单是它的兄弟元素，通过 peer-checked: 触发显示/隐藏。移动端菜单默认折叠，桌面端始终展开。
示例结构片段：
立即学习“前端免费学习笔记（深入）”；
<div class="relative">
<input type="checkbox" id="mobile-menu" class="peer sr-only">
<label for="mobile-menu" class="lg:hidden ...">☰</label>
<nav class="peer-checked:translate-y-0 peer-checked:opacity-100 lg:translate-y-0 lg:opacity-100 transition-all duration-300 origin-top absolute top-full left-0 w-full bg-white shadow-lg rounded-b-lg mt-1 opacity-0 -translate-y-2 overflow-hidden lg:static lg:opacity-100 lg:translate-y-0 lg:shadow-none">
<ul class="flex flex-col lg:flex-row p-4">
<li><a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded">首页</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded">关于</a></li>
</ul>
</nav>
</div>
-
peer-checked:translate-y-0和peer-checked:opacity-100只在 checkbox 被勾选时生效 -
lg:translate-y-0等断点类确保桌面端忽略 peer 状态，始终显示 - 过渡动画必须写在菜单元素上，且需包含
transition-all和duration-，否则peer-checked:切换无动画
为什么菜单在 iOS Safari 上偶尔闪一下再展开？
这是 Safari 对 transform + opacity 组合动画的渲染优化问题，尤其当菜单初始位置为 -translate-y-2 且 opacity-0 时。它可能先渲染透明态再应用位移，造成视觉跳动。
- 避免同时用
opacity-0和invisible——后者不参与过渡，容易错乱 - 改用
max-h-0 overflow-hidden配合peer-checked:max-h-96替代 opacity 控制（更稳定，但需预估最大高度） - 或强制开启硬件加速：
will-change: transform, opacity，加在菜单元素上 - 确保父容器有
overflow-hidden，防止下拉时内容溢出
菜单关闭后焦点没归还，键盘用户无法继续操作
纯 CSS 方案无法监听 checkbox 取消勾选事件，因此无法自动将焦点移回触发按钮。这对可访问性（WCAG 2.1）是硬伤。
- 必须补充极简 JS：监听
change事件，在!e.target.checked时调用button.focus() - 按钮需有
id且与 JS 中引用一致，例如<button id="menu-toggle"> - 不要用
document.activeElement.blur()，这会让键盘用户彻底失去焦点上下文
复杂点不在样式，而在 checkbox 的生命周期管理——它既是交互入口，又是状态源，也是可访问性链路的一环。漏掉任一环节，移动端体验就断了。
