HTML原生折叠仅支持<details><summary>，轻量且无障碍友好但无CSS动画；需动画或兼容旧浏览器时，须用JS控制max-height或visibility+transform，但后者语义性差、适用场景受限。
HTML 本身没有原生的“展开/折叠”组件，必须靠 <details> + <summary> 或 JavaScript 配合 CSS 实现；用原生 <details> 最轻量、无障碍友好，但样式和行为受限；需要自定义动画或兼容旧浏览器时，得自己写 JS 控制 max-height 或 display。
用 <details> 和 <summary> 快速实现可访问折叠
这是唯一被 HTML 标准支持的语义化折叠方案，自带 ARIA 属性、键盘支持（空格/回车触发）、无需 JS。
-
<summary>内容默认显示，点击后展开/收起<details>的其余子内容 - 默认有箭头图标（不同浏览器样式不同），可用
::marker或list-style覆盖 - 加
open属性可默认展开：<details open> - 不支持 CSS 过渡动画（
height无法过渡），如需淡入/滑动效果，必须换方案
<details> <summary>点击查看说明</summary> <p>这里是被折叠的详细内容，支持任意 HTML 元素。</p> </details>
用 JavaScript + max-height 实现带动画的展开收起
当需要平滑高度过渡（比如从 0 → 自适应高度）时，不能直接对 height: auto 做 transition，得用 max-height 模拟，或用 JS 测量真实高度。
- 设初始
max-height: 0，溢出隐藏；展开时设为一个足够大的值（如max-height: 500px），再用 transition 过渡 - 更精确的做法：JS 先设
height: auto，读取offsetHeight，再设回max-height并触发 transition - 注意：内容高度变化时（如图片加载、字体渲染完成），可能需重新测量
- 记得在收起后清除
max-height并设overflow: hidden，否则影响布局
const toggleBtn = document.querySelector('.toggle-btn');
const content = document.querySelector('.fold-content');
toggleBtn.addEventListener('click', () => {
const isOpen = content.style.maxHeight;
if (isOpen) {
content.style.maxHeight = '0';
content.style.overflow = 'hidden';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
content.style.overflow = 'visible';
}
});
用 CSS visibility + transform 模拟折叠（适合固定高度内容）
如果折叠区域高度固定（比如统一 120px），可以用 visibility + transform: scaleY() 实现带缩放感的展开动画，性能比 max-height 更好。
立即学习“前端免费学习笔记（深入）”；
-
transform: scaleY(0)配合visibility: hidden完全隐藏，且不占文档流 - transition
transform和visibility（visibility 不能过渡，需配合opacity或延迟切换） - 缺点：只适用于已知高度或能接受裁剪的内容；
scaleY(0)会压缩内部文字，可能影响可读性 - 不推荐用于长文本或动态内容，语义性和可访问性弱于
<details>
.fold-content {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.fold-content.closed {
transform: scaleY(0);
opacity: 0;
visibility: hidden;
}
.fold-content.open {
transform: scaleY(1);
opacity: 1;
visibility: visible;
}
真正难的不是让内容“动起来”，而是处理边界情况：异步加载的内容高度未定、屏幕阅读器播报逻辑、键盘焦点管理、移动端点击穿透、动画中断时的状态残留——这些往往比写个 toggle 函数花的时间多得多。
