纯 CSS 响应式折叠面板推荐用 input[type="radio"]+label+~ 实现，因 details 标签不支持动画、无互斥、移动端体验差；需严格 DOM 顺序、name 互斥、隐藏 input、label 关联 id、max-height 固定值过渡、图标 transform-origin 居中及真机测试预估高度。
纯 CSS 实现响应式折叠面板，details 标签开箱即用但生产环境不推荐；真正可控、可动画、可互斥的方案，得用 input[type="radio"] + label + ~ 选择器驱动 max-height 过渡。
为什么不能直接用 details 的 open 属性
open 是布尔属性，无法被 CSS 动画监听；:has(details:open) 在 Safari 15.4+ 才稳定，且不支持 transition；多个 details 默认可同时展开，没有单选互斥机制；移动端 summary 点击热区小、易误触，且 ::marker 难以统一控制样式。
input[type="radio"] + label 结构必须严格对齐
伪类生效依赖 DOM 层级顺序。常见错误是把 div.panel-content 套在 label 里，或中间插入其他元素，导致 :checked ~ .panel-content 失效。
- 正确结构：同级、
input在前、label紧跟、.panel-content紧随其后 -
input必须有name属性（如name="accordion"）才能天然互斥 -
input要加position: absolute; clip: rect(0 0 0 0);隐藏但保可访问性 -
label的for必须精确匹配input的id
max-height 过渡必须设固定值，且不能太大
CSS 不支持 max-height: auto 过渡，所以必须设一个“略大于最大预期内容高度”的值。设太大（如 1000px）会导致动画拖尾、末尾悬停感强；设太小则截断内容。
立即学习“前端免费学习笔记（深入）”；
- 移动端建议起始值：
max-height: 320px（覆盖 3–4 行文本 + 小图标） - 桌面端可升至
max-height: 600px，但需配合@media分层调整 - 收起状态必须写全：
max-height: 0; opacity: 0; overflow: hidden; - 展开状态必须同步写：
max-height: 600px; opacity: 1;，且transition写在该元素上
图标旋转和点击区域容易失效
用 ::after 生成 ▼ 并靠 transform: rotate() 翻转，常因默认 display: inline 和未设 transform-origin 导致不转或偏轴。
- 图标伪元素必须加
display: inline-block或block - 必须显式声明
transform-origin: center - 父容器（如
.accordion-header）要设position: relative，图标用position: absolute; top: 50%; transform: translateY(-50%)垂直居中 -
label自身要加padding和cursor: pointer，否则小屏点击热区过窄
最麻烦的不是写法，而是不同设备下内容高度浮动——纯 CSS 没法读取 scrollHeight，所以那个「足够大又不过大」的 max-height 值，得靠你预估内容密度，再在真机上反复测。一旦内容动态加载或含图片，就得让 JS 接手补位，纯 CSS 在这里会露馅。
