纯CSS实现移动端可折叠面板唯一可靠路径是用预设固定值的max-height配合overflow:hidden；因auto和百分比无法插值，且需避免过渡失效、溢出、兼容性等问题。
纯 CSS 实现移动端可折叠面板，max-height 是唯一可靠路径；height: auto 和 display 切换无法触发过渡动画，直接跳变。
为什么 max-height: 0 → auto 动画不生效
浏览器无法对 auto 做数值插值，哪怕写成 max-height: 0 → 100% 也无效——百分比在非 flex/grid 容器中无计算基准。常见错误是：
.panel { max-height: 0; transition: max-height 0.3s; }.panel.open { max-height: auto; }
结果是内容瞬间出现，无动画。
正确做法：预设一个“足够大但不过量”的固定值，比如 max-height: 30em 或 max-height: 500px。过大会导致收起后留白；过小会截断内容（动画中途卡住）。
立即学习“前端免费学习笔记（深入）”；
overflow: hidden 不是可选项，是硬性前提
漏掉它，内容会在动画过程中溢出、遮挡其他元素，甚至破坏布局流。必须始终存在：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 初始状态：
max-height: 0; overflow: hidden; opacity: 0; - 展开状态：
max-height: 30em; overflow: hidden; opacity: 1;
别用 overflow: visible 替代——那会让动画彻底失效。如果同时用 opacity，显式声明过渡属性：transition: max-height 0.3s ease, opacity 0.3s ease，避免 transition: all 触发意外重排。
优先用原生 <details><summary>，别自己造轮子
它自带 open 属性切换、键盘支持（Space/Enter）、aria-expanded 同步，无需 JS。样式受限？可以覆盖：
- 禁用默认箭头：
summary::marker { display: none; }，但别对整个<summary>用display: none，否则失去可聚焦性 - 自定义动画：
details[open] .content { max-height: 30em; opacity: 1; } - 移动端点击不响应？检查是否误删了
<summary>的可聚焦能力，或在外层 div 上滥用:focus-within——部分安卓 WebView 不支持该伪类
若内容高度波动极大（比如含动态图片或字体加载），纯 CSS 就撑不住了：得切回 JS 读取 scrollHeight 并写入内联 max-height。
Safari 和旧版 WebView 的兼容性坑
某些 Safari 版本会忽略 max-height 过渡，尤其搭配 opacity 时。加固写法：
- 加
transition-property: max-height, opacity - 避免用
em单位做过渡终点（字体缩放可能干扰），px或rem更稳 - 收起后确保
pointer-events: none没被误加——它会让底层内容被穿透点击，真实原因是没同步关掉opacity和overflow
最易被忽略的点：动画结束后的视觉残留。比如 max-height: 500px 收起后，实际内容只有 200px 高，但容器仍占着 500px 空间——这得靠精确预估或 JS 补位。
