不能只用 display: none 切换，因为它会导致布局跳变、无过渡效果，且 display 属性不支持 css transition；display: none 时元素脱离文档流，scrollheight 和 offsetheight 均返回 0，无法获取真实内容高度，尤其在含图片或异步内容的富文本中会引发动画失效与状态判断错误。
直接用 <details></details> 标签就能实现“展开/收起全文”，但仅适用于静态、语义明确的折叠场景；若要控制长文本（比如含图片、换行、列表的富文本）并带滑动动画，必须用 max-height + overflow: hidden + JavaScript 动态读取高度。
为什么不能只用 display: none 切换？
它会导致布局跳变、无过渡效果，且无法触发重排计算真实内容高度。用户点击后内容“啪”一下弹出来，体验生硬；更严重的是，如果折叠区里有图片或异步加载内容，display 切换后 JS 读不到真实 scrollHeight，后续动画或状态判断会出错。
- 浏览器不支持
display属性的 CSS 过渡（transition 无效） -
display: none时元素脱离文档流，offsetHeight和scrollHeight都返回 0 - 富文本中若有
<img>或<iframe></iframe>，加载完成前高度不可预估
用 max-height 实现平滑展开的关键三步
核心是让容器始终在文档流中，靠限制最大可见高度 + 溢出隐藏来模拟“收起”，再靠过渡动画拉伸这个上限。
- 初始样式设
max-height: 0+overflow: hidden+transition: max-height 0.3s ease-out - 点击展开时：先移除
open类（确保 height 归零），再强制重排（如读取offsetHeight），最后设置max-height为element.scrollHeight - 收起时直接设回
max-height: 0；动画结束后可清除max-height（设为none）避免干扰后续 JS 计算
JS 中怎么安全读取真实内容高度？
scrollHeight 是唯一可靠的值，但它必须在内容完全渲染后读取——尤其是含图片时，得等 load 事件或用 getBoundingClientRect() 触发重排。
- 不要在 DOM 加载完（
DOMContentLoaded）就立刻读scrollHeight，图片可能还没加载 - 稳妥做法：展开前先检查
img是否已加载，未加载则监听其load事件，再执行高度读取 - 或者用
el.offsetHeight强制触发一次重排（哪怕只是读一下），再取scrollHeight - 注意：若内容里有
position: absolute或float元素，scrollHeight可能偏小，需额外包裹一层div并设clear: both
用 <details></details> 的实际限制有哪些？
它适合 FAQ、配置说明等纯文本轻量场景，但一旦涉及定制动画、多级嵌套、图标旋转或兼容旧版 Safari，就得退回到手写方案。
-
<summary></summary>必须是<details></details>的第一个子元素，否则折叠逻辑失效 - Safari 对
summary::marker的content支持不稳定，想换图标得用::before+transform - 无法用 CSS 给
<details></details>添加 height 过渡；加了也无效，因为浏览器内部不走 CSS 渲染管线 - JS 操作
open属性在 Safari 旧版本中有延迟，不能依赖同步状态
真正难的不是“怎么让它动起来”，而是“怎么让它动得准”——富文本高度不可控，图片加载异步，CSS 布局又常绕过常规流。所以每次展开前那句 el.offsetHeight 不是可有可无的补丁，而是确保动画起点正确的必要操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
