纯css手风琴核心是checkbox:checked配合兄弟选择器控制max-height过渡动画，input须与面板同级且在前、display:none，label[for]关联触发，用max-height而非height/display实现可过渡的折叠效果。
checkbox + :checked 怎么触发折叠动画
纯 CSS 手风琴的核心不是 JS 控制显隐，而是用 input[type="checkbox"] 的状态切换配合 :checked 伪类，再通过兄弟选择器（~ 或 +）影响后续元素。关键在于：必须让 input 和要控制的面板在 DOM 中处于同一父级，且 input 在前。
常见错误是把 input 放进 label 里却忘了它仍需和面板同级；或者用了 + 却隔了一个元素，导致选择器失效。
-
input必须是display: none，否则会显示原生复选框 - 用
label[for="xxx"]关联input，点击 label 就能 toggle 状态 - 折叠内容区要用
max-height配合transition，不能只靠height: 0 / auto——auto无法过渡 - 初始状态用
input:not(:checked) ~ .panel { max-height: 0; }，展开时设为足够大的固定值（比如600px），确保动画生效
为什么用 max-height 而不是 height 或 display
height: 0 → height: auto 不会触发 CSS 过渡，浏览器无法计算 auto 的终点值；display: none → block 则完全无过渡可能 —— 它是离散状态切换。所以必须用 max-height，它支持过渡，且只要设得比内容实际高度大，就能“撑开”容器。
但要注意：如果内容高度变化大（比如响应式下文字换行增多），预设的 max-height: 600px 可能在小屏下不够，导致底部被截。稳妥做法是按最大可能内容估算，或加 JS 动态补足（但那就不是纯 CSS 方案了）。
- 别写
max-height: 0 → max-height: 100vh，滚动时会有明显延迟感 - 过渡时间建议
0.3s左右，太快不清晰，太慢像卡顿 - 加
overflow: hidden到面板容器上，否则内容可能溢出动画区域
兄弟选择器 ~ 和 + 的区别与选型
+ 只匹配紧邻的下一个兄弟元素，~ 匹配之后所有符合条件的兄弟元素。手风琴里通常一个 input 对应一个面板，用 + 更精准、性能略好；但如果面板结构复杂（比如中间夹了标题、分割线等非面板元素），就得用 ~。
典型结构陷阱：写成 input:checked + .panel，但 HTML 是 input → h3 → .panel，这时 + 失效，必须改用 ~ 或调整 DOM 顺序。
- 若保证
input后紧跟面板，优先用+，语义更明确 - 用
~时注意别误中其他同名 class 元素（比如页面其他地方也有.panel） - 不要嵌套
input在面板内部 —— 那就破坏了兄弟关系，选择器完全失效
移动端点击区域小、Safari 动画卡顿怎么办
默认 label 点击热区只有文字大小，小屏上难点；Safari 对 max-height 过渡渲染较慢，尤其内容多时容易跳帧。
- 给
label加padding: 12px 16px，并设display: block，扩大可点区域 - Safari 下加
-webkit-transform: translateZ(0)到面板上，强制启用 GPU 加速 - 避免在面板内用大量
box-shadow或filter，这些会显著拖慢重绘 - 真要兼容老 Safari（opacity +
transform: scaleY()组合过渡，牺牲一点语义换流畅度
最常被忽略的是：没给 input 设 id，导致 label[for] 失效，整个交互链断掉 —— 看起来点了没反应，其实只是 checkbox 根本没被触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
