纯CSS实现折叠面板应使用details+summary，通过max-height过渡实现动画，隐藏默认箭头并手动添加旋转图标，扩大点击区域需设summary为block并加padding，移动端需用px单位并避免多属性同时过渡。
纯 CSS 实现常见问题折叠面板，details + summary 是最轻量、语义正确且自带可访问性的方案；但直接套用会遇到动画失效、图标错位、点击热区窄等问题，必须针对性处理。
为什么 details 默认没动画？
浏览器原生 details 切换时只改变 open 属性，不触发任何 CSS 过渡。CSS 无法对 display: none ↔ block 或 height: auto 做插值，所以内容总是“啪”一下弹出。
- 别写
.content { height: 0; transition: height 0.3s; }——height: auto不可过渡 - 别依赖
details[open] .content { height: auto; }—— 这会导致跳变，不是动画 - 正确路径：用
max-height模拟高度变化，配合overflow: hidden - 目标值不能是
auto或百分比，得是固定值，比如max-height: 500px（根据内容预估）
如何让展开收起带平滑动画？
关键不是控制 details，而是控制它内部的内容容器（如 .content），并确保过渡属性精准作用于可插值的数值型属性。
- 初始状态：
.content { max-height: 0; overflow: hidden; opacity: 0; } - 展开状态：
details[open] .content { max-height: 500px; opacity: 1; } - 必须显式声明过渡：
transition: max-height 0.3s ease, opacity 0.3s ease（避免transition: all触发意外重排） -
max-height值要略大于内容实际高度——太小会截断，太大收起后留白明显；500px 或 30em 是较稳妥起点 - 如果内容含图片或字体加载后高度变化，纯 CSS 就不可靠，得切回 JS 读取
scrollHeight动态设值
怎么自定义折叠图标并保证点击区域够大？
原生 summary 的点击热区仅覆盖文字和默认 marker，左右 padding 不扩大触发范围；图标旋转也常因定位或 display 问题失效。
立即学习“前端免费学习笔记（深入）”；
- 隐藏默认箭头：
summary::marker { display: none; }（Safari 16.4+、Chrome/Firefox 支持） - 手动加图标：在
summary内放<span class="icon"></span>，再用transform: rotate(0deg)/rotate(180deg)控制翻转 - 图标居中关键：
.icon { display: inline-block; transform-origin: center; vertical-align: middle; } - 扩大点击区最稳做法：给
summary设display: block+padding，再包裹一层<div onclick="this.parentNode.toggleAttribute('open')">（保留语义的前提下绕过热区限制） - 别用
:focus-within扩展热区——部分安卓 WebView 不支持，会导致移动端点不响
移动端点击无响应或动画卡顿怎么办？
这不是代码写错了，而是 Safari 和旧版 WebView 对 max-height 过渡的兼容性缺陷，尤其在搭配 opacity 时容易丢帧或跳过动画。
- 加固写法：用
px替代em单位（字体缩放会干扰em计算） - 避免同时过渡太多属性；优先保
max-height，opacity可选 - Safari 16.6 之前版本对
inline伪元素的transform支持差，务必设display: inline-block - 收起后检查是否误加了
pointer-events: none—— 它会让底层内容被穿透点击，真实原因常是opacity: 0没同步关掉 - 动画结束后视觉残留（比如收起后还看到半截内容）：确认
overflow: hidden始终存在，且没被其他规则覆盖
