原理核心是用:checked伪类联动控制兄弟元素显隐，需确保input与侧边栏同级且input在前，配合label触发、transform过渡动画及媒体查询实现响应式，键盘访问需JS补足Esc关闭和焦点管理。
用 :checked 触发侧边栏显隐的原理
核心是把 <input type="checkbox"> 当作状态开关，用它的 :checked 伪类联动控制兄弟元素（比如 <aside></aside> 或 <nav></nav>）的显示与宽度。CSS 本身没有变量或状态管理，所以得靠这个“隐藏表单控件 + label + 相邻/通用兄弟选择器”的组合来模拟开关行为。
关键点在于：必须确保 <input> 和要控制的侧边栏在 DOM 中是兄弟关系，且 <input> 在前；否则 ~ 或 + 选择器失效。
-
<input id="sidebar-toggle">必须有id，对应<label for="sidebar-toggle"></label>才能点击 label 切换状态 - 侧边栏元素要用
#sidebar-toggle:checked ~ .sidebar这类选择器，不能用父选择器（CSS 没有） - 不要给
<input>设display: none—— 部分旧版 Safari 会因此忽略其状态变化；改用position: absolute; opacity: 0; pointer-events: none;
移动端适配：媒体查询和过渡动画怎么加才不卡
响应式不是只靠 :checked 就完事。真正在小屏上展开、大屏上常驻，得靠媒体查询分层控制。重点是：大屏下直接让侧边栏固定宽度、不依赖 :checked；小屏下才启用 checkbox 控制逻辑。
动画卡顿常见原因是同时过渡太多属性（比如 width + transform + opacity），尤其在低端安卓 WebView 上。只过渡 transform 和 opacity 最稳妥。
立即学习“前端免费学习笔记（深入）”；
- 小屏默认隐藏侧边栏：
.sidebar { transform: translateX(-100%); } -
#sidebar-toggle:checked ~ .sidebar { transform: translateX(0); }，配合transition: transform 0.3s ease - 大屏（如
@media (min-width: 768px)）里重置：取消transform，设固定width，并移除:checked相关样式 - 别用
max-height: 0→max-height: 300px做展开动画——浏览器无法硬件加速，必卡
为什么点击后侧边栏一闪就收？常见 DOM 结构错误
最典型的现象是：点开瞬间出现，松手就消失。根本原因几乎都是 <input> 和侧边栏不在同一层级，或者被其他元素（比如 <form></form>、<div class="wrapper">）意外隔开。
<p>检查 DOM 结构是否满足“同级+顺序”：label 可以放在任意位置（只要 <code>for 匹配），但 <input> 和 <aside class="sidebar"></aside> 必须是同一个父容器下的连续兄弟节点。
- ❌ 错误结构：
<div><input></div> <aside></aside>→~选不到，因为不是同级 - ✅ 正确结构：
<input id="t"><label for="t">Menu</label><aside class="sidebar"></aside> - 如果用了 Vue/React 等框架，注意组件渲染可能打乱原始顺序，建议把
<input>和<aside></aside>放进同一个无标签 wrapper（如<div>）里 <li>避免用 <code>display: none隐藏侧边栏 —— 它会让元素脱离文档流，:checked ~依然匹配，但视觉上不可见，容易误判逻辑 - 给
<input id="sidebar-toggle">绑定keydown：当e.key === 'Escape'时，e.target.checked = false - 侧边栏内部第一个可聚焦元素（如首项
<a></a>）需要tabindex="-1"，并在展开后用 JS.focus()—— 否则键盘用户卡在 toggle 按钮出不去 - 不要用
aria-hidden="true"硬关语义；应该根据checked状态动态切aria-expanded和aria-controls - 手机 Safari 的
:focus样式有时不触发，建议用:focus-visible替代，并加outline保证可见
键盘可访问性和 focus 状态怎么补全
纯 CSS 实现的侧边栏默认不支持键盘打开（Tab 到 label 后按 Space 可以，但焦点不会自动进侧边栏）。用户按 Esc 想关闭？CSS 做不到。这些必须靠少量 JS 补足，但只需最小干预。
重点不是重写逻辑，而是“接管关闭动作”：监听 Escape 键，把 <input> 设为 checked = false 即可，CSS 自动响应。
真正难的从来不是“怎么展开”，而是展开之后焦点在哪、屏幕阅读器怎么读、Esc 怎么关、小屏横屏怎么保持状态 —— 这些细节堆起来，才是用户实际遇到的“响应式侧边栏”。
