纯css实现响应式导航栏折叠需用作状态源，配合peer与peer-checked选择器控制同级相邻导航栏显隐；移动端用translate-x-full滑入+transition-transform实现丝滑动画，桌面端用lg:flex恢复显示，遮罩层须设为以同步状态。
用 peer 和 peer-checked 触发导航栏显示隐藏
纯 CSS 实现响应式导航栏折叠/展开，关键不是靠 JS 控制 class，而是用原生表单控件（如 <input type="checkbox">）作为状态源，再通过 peer 选择器联动兄弟元素。Tailwind 的 peer-checked 必须配合 peer 使用，且 checkbox 必须在目标元素之前、同级、相邻（不能隔标签或嵌套）。
常见错误是把 checkbox 放在 <nav></nav> 内部或后面，导致 peer 失效；或者忘了加 peer 类——它本身不带样式，但没它，所有 peer-* 都不生效。
实操建议：
- 把
<input id="menu-toggle" type="checkbox" class="peer hidden">放在<header></header>开头，紧挨着要控制的<nav></nav> -
<nav></nav>加peer-checked:translate-x-0和translate-x-full实现滑入效果（移动端），同时加lg:translate-x-0确保桌面端始终显示 - 用
peer-checked:opacity-100+opacity-0配合transition-opacity做淡入，避免闪跳
移动端用 translate-x-full 而不是 hidden
hidden 在切换瞬间会触发重排，且无法做过渡动画；而 translate-x-full 把导航栏移出视口右边界，配合 transition-transform 就能实现丝滑滑动。更重要的是：它不影响 DOM 流布局，不会导致页面抖动。
注意点：
- 必须给
<nav></nav>设定固定宽度（如w-64）和absolute或fixed定位，否则translate-x-full位移基准不可控 - 如果导航栏内容高度不固定，记得加
max-h-screen overflow-y-auto防止内容溢出 - 桌面端要用
lg:flex显式恢复 flex 布局，不能只依赖peer-checked—— 否则小屏展开后，大屏缩放时可能残留隐藏状态
peer 不支持嵌套或跨层级，替代方案只有 JS 或改结构
如果设计稿要求汉堡菜单图标和导航栏不在同一 DOM 层级（比如图标在 <header></header> 右上角，导航在 <aside></aside>），peer 就完全失效——它只认相邻兄弟，不支持祖先、后代或任意兄弟。
这时别硬套 peer，直接换方案：
- 把 checkbox 提到公共父容器顶部（如
下第一个元素），然后用多个peer控制不同区域（可行但维护成本高） - 改用
data-*属性 +querySelector+classList.toggle，一行 JS 就解决，比折腾 CSS 更可靠 - 若必须零 JS，就接受结构约束：汉堡按钮、checkbox、导航栏三者必须平级且顺序为「checkbox → 按钮 → 导航」或「checkbox → 导航」
点击遮罩层关闭导航栏时，peer 状态不同步怎么办
遮罩层（overlay）通常放在导航栏之后、全屏覆盖，点击它应关闭菜单。但 checkbox 是单向控制，点击遮罩层不会自动取消勾选——这是最常被忽略的同步问题。
解决方式只有两个：
- 给遮罩层加
for="menu-toggle"并设为<label></label>，这样点击即触发 checkbox 切换（推荐，纯 HTML 方案） - 如果遮罩层必须是
<div>，就得用 JS：<code>document.getElementById('menu-toggle').checked = false，否则状态和 UI 一定脱节 - 别试图用
peer-hover或peer-focus替代，它们无法响应点击事件，且不适用于关闭逻辑
真正麻烦的从来不是怎么展开，而是怎么确保所有关闭路径（ESC 键、遮罩点击、路由跳转）都能同步 checkbox 状态。这点容易被漏测，上线后用户点一次开、点十次关不了。
