纯css手风琴正常运行的关键是max-height值设置合理且overflow:hidden生效；height无法过渡，max-height可过渡但需大于内容实际高度；overflow:hidden必须作用于被展开容器且不被父级覆盖；兄弟选择器应根据dom结构选用~而非+。
纯 CSS 手风琴能跑起来，关键不在“怎么写”，而在「max-height 值设多大」和「overflow: hidden 是否真生效」——这两点错了，动画就卡、跳、截断或干脆不动。
为什么必须用 max-height 而不是 height
height: 0 → height: auto 不会触发过渡，浏览器无法把 auto 解析成像素值，动画直接跳变。而 max-height 是可过渡的数值属性，只要设得比内容实际高度大，就能“撑开”容器并保持动画连贯。
- 别写
max-height: 0 → max-height: none：CSS 过渡不支持none作为终点值 - 别依赖
height做动画：哪怕你手动算出 scrollHeight，也容易因字体加载、行高变化导致错位 - 移动端 Safari 对
height过渡更敏感，一卡就是整页卡顿
max-height 的值到底该设多少
设小了内容被截，设大了动画拖沓（比如从 0 → 1000px 要跑满 1s）。稳妥做法是按当前内容最大可能高度预估，而非拍脑袋填 500px 或 100vh。
- 响应式页面要特别注意：小屏下文字换行增多，原设的
max-height: 400px可能在 iPhone 上不够 - 避免
max-height: 100vh：滚动时会明显延迟收起，视觉上像“粘住” - 若内容高度差异极大（比如 FAQ 条目从 2 行到 20 行），建议分组设不同值，或改用
transform: scaleY()+overflow: hidden
overflow: hidden 必须加在谁身上
必须加在被展开的容器（如 .panel 或 .accordion-content）上，且不能被父级的 overflow: visible 覆盖。漏掉这句，动画过程中内容会溢出、遮挡其他元素，甚至触发意外重排。
- 检查父容器是否设置了
overflow: hidden或clip-path，它们可能干扰子元素的 overflow 行为 - 不要只靠
visibility: hidden或opacity: 0配合过渡：它们不控制布局空间，折叠时仍占位 - 某些旧版 Android WebView 会忽略嵌套层级里的
overflow: hidden，需加will-change: max-height强制触发合成层
兄弟选择器 + 和 ~ 怎么选
结构决定选择器成败。如果 input 后面紧跟着面板（input → .panel），用 + 更精准；但现实中标题常包在 label 里，真实 DOM 是 input → label → .panel，这时 + 失效，必须用 ~。
-
input:checked + .panel：仅匹配 input 后**紧邻**的 .panel，中间插任何元素都断链 -
input:checked ~ .panel：匹配同一父容器内 input **之后所有** .panel，容错强，但要注意别误中页面其他同名 class - 别把
input嵌进label或.panel内部——它必须和面板平级，否则兄弟关系彻底失效
最常被忽略的是：DOM 层级没对齐、overflow: hidden 漏写、max-height 值在响应式断点下失效——这三个点任何一个出问题，手风琴看起来就像“点了但没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
