用 input[type="radio"] 因其天然支持同 name 组内单选互斥，无需额外 JS 控制；而 checkbox 需手动清空其他项，易出错。
为什么用 input[type="radio"] 而不用 input[type="checkbox"]
因为手风琴默认要求「单选互斥」：展开一个，其他必须收起。用 radio 天然支持同一 name 组内单选，无需 JS 监听或手动控制状态。而 checkbox 需额外逻辑清空其他项，容易漏掉边界情况（比如用户连点两次同一项）。
关键点：
-
radio必须同名（如name="accordion"），否则互斥失效 - 每个
radio需搭配唯一id，并通过for关联对应标题标签 - 不要给
radio设checked属性——除非你明确要默认展开某一项；否则初始全部收起更可控
max-height 动画为什么常设成固定值而非 max-height: none
CSS 无法对 none 或 auto 做过渡动画，所以必须用具体数值。常见错误是硬写死 max-height: 500px，结果内容超长时被截断，或内容很短时动画“坠落感”太强。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 估算最大可能高度（如含 5 行文本 + 2 张图），设为
max-height: 600px，比实际略大但不过分冗余 - 收起时设
max-height: 0，同时配overflow: hidden防内容溢出 - 过渡用
max-height 0.3s ease-in-out，别加opacity或transform混用——它们触发重排/重绘时机不同，易导致动画卡顿或不同步
如何让点击区域不只是 radio 小圆点，而是整行标题都可点
直接把 label 包住标题文字和 radio，并设 display: block 即可。但要注意：如果标题里有链接、按钮等可交互元素，label 的点击会冒泡触发 radio 切换，可能干扰原意。
稳妥做法：
- 结构上用
<label><input type="radio"><span class="title">标题</span></label> - 给
.title加pointer-events: none，确保内部子元素不拦截点击，所有点击都落到label上 - 若标题内必须保留可点击子元素（如编辑图标），就改用 JS 监听
label的click事件，在事件处理器里preventDefault()并手动radio.checked = true
移动端点击无响应或延迟？检查这三点
iOS Safari 和部分安卓浏览器对 label + radio 的触控支持较弱，尤其嵌套深或用了 transform 的容器里。
立即验证 & 修复：
- 给
label加cursor: pointer和-webkit-tap-highlight-color: transparent，消除点击反馈延迟 - 避免把
radio放在position: absolute或transform: translateZ(0)的父容器里——这会破坏 iOS 的点击穿透逻辑 - 真机测试时，打开 Safari 开发者工具 → “Disable Cache” + “Enable Touch Events”，再刷新，排除缓存与模拟误判
max-height 的取值合理性与移动端 label 的穿透行为——前者影响内容完整性，后者导致整个交互链路失效，且错误现象不报错，只“没反应”。 
