html原生标签仅支持基础折叠，真正可控的展开收起需javascript配合css实现；推荐用max-height过渡方案，注意强制重排、scrollheight时机及兼容性问题。
HTML 本身没有内置的“折叠/展开”功能
纯 HTML 标签（比如 <details></details>、<summary></summary>）能实现基础的点击展开/收起，但行为受限：不支持自定义动画、无法控制初始状态为展开、不能绑定到任意元素。它只是浏览器原生提供的简易交互组件，不是通用折叠方案。
真正可控的展开收起，必须靠 JavaScript 配合 CSS 实现。核心逻辑是：切换目标元素的 height、max-height 或 display 等样式属性，并用 JS 控制这个切换时机和状态。
-
<details></details>默认关闭，open属性可设为默认展开，但无法用 CSS 覆盖其箭头图标或过渡效果 - 所有现代浏览器都支持
<details></details>，但 Safari 旧版本对open的 JS 操作有延迟 - 若需兼容 IE 或需要滚动动画、多区域联动、异步内容加载，必须手写 JS + CSS
用 CSS max-height + JS 切换是最稳妥的展开收起方案
比起直接改 display: none/block（会跳变），用 max-height 配合 CSS 过渡（transition）能实现平滑高度变化。关键是把 max-height 设为一个“足够大但确定”的值（比如 500px），而非 none 或 auto（它们无法过渡）。
示例结构：
<div class="accordion-item"> <button class="toggle-btn">标题</button> <div class="content">这里是折叠内容...</div> </div>
CSS 关键部分：
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.content.open {
max-height: 500px; /* 必须是具体数值 */
}
- JS 只需在点击时给
.content切换open类名即可 - 如果内容高度差异大（比如从 20px 到 1200px），
500px可能不够，可改用600px或估算最大可能高度 - 不要用
height: auto做过渡目标值——CSS 过渡不支持auto
用 Element.scrollHeight 动态计算高度更精准，但要注意执行时机
当内容高度不可预估（比如含图片、异步加载文本），硬编码 max-height 容易出错。这时可在 JS 中读取 element.scrollHeight，再赋值给 max-height，触发过渡。
典型流程：
- 点击按钮 → 先移除
open类，确保max-height为0 - 强制重排（如读取
offsetHeight），让浏览器应用新样式 - 再设置
max-height为element.scrollHeight，过渡开始 - 过渡结束后，可清除
max-height（设回none），避免影响后续 JS 计算
容易踩的坑：
- 没强制重排就直接设
max-height，浏览器会跳过过渡，直接显示全高 -
scrollHeight在图片未加载完时不准，需监听img.onload或用ResizeObserver - 在 Vue/React 等框架中，要等虚拟 DOM 更新完成再读取尺寸，常用
nextTick或useEffect的依赖数组控制
jQuery 的 .slideToggle() 看似简单，但隐藏着兼容和性能问题
虽然 $(".content").slideToggle() 一行就能实现，但它内部用的是 height 动画 + display 切换，不依赖 max-height，因此能处理 auto 高度。但代价明显：
- IE8–IE10 下动画卡顿严重，
slideToggle会触发重排多次 - 无法与 CSS
transition共存，一旦页面有全局transition: all，会出现意外交互 - 在移动端，频繁调用
slideToggle可能导致layout thrashing（布局抖动） - 如果元素有 padding/border，
slideToggle默认只动height，视觉上会“挤”或“露边”，需手动调整box-sizing
现代项目中，除非已重度依赖 jQuery 且不维护旧浏览器，否则建议用原生方案替代。
折叠展开不是加个属性就能搞定的事，关键在状态同步、尺寸测量时机、过渡属性选择这三个点上。漏掉任一环节，都会出现闪动、卡顿、高度截断或点击无响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
