HTML无原生折叠组件，需CSS+JS实现；details/summary虽原生但兼容性差、样式受限、无动画；手写方案用max-height过渡+ARIA属性保障可访问性与体验。
HTML 本身没有原生的“折叠/展开”组件，所谓“折叠”必须靠 CSS 控制显隐 + JavaScript 控制状态切换，否则无法响应用户交互。纯用 details/summary 虽简单，但样式受限、兼容性差（IE 完全不支持），实际项目中多数需要手写逻辑。
用 details 和 summary 快速实现但要注意兼容性
这是唯一 HTML 原生支持的折叠元素，无需 JS 就能展开收起：
<details> <summary>点击展开</summary> <p>这里是被折叠的内容</p> </details>
但它的问题很实在：
-
summary不能用display: block或自定义图标（默认带三角，且 IE/Edge Legacy 不渲染） - 无法监听展开/收起事件（
toggle事件在 Safari 和旧 Chrome 中支持不稳定） - 无法做过渡动画（
details内容是直接显示/隐藏，不是 height 过渡） - 部分屏幕阅读器对
details的 ARIA 支持不一致，可访问性需额外补aria-expanded和aria-controls
手写 JS 控制 max-height 过渡动画更可控
要加平滑展开收起效果，核心是控制 max-height 并配合 CSS transition。关键点不在“能不能动”，而在“怎么动得自然”：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要用
height: 0 → height: auto：CSS 无法对auto做过渡，会直接跳变 - 改用
max-height，设一个足够大的值（如max-height: 500px），再过渡它 - 内容高度动态变化时，先用
offsetHeight测出真实高度，再设为max-height，避免撑开过长或截断 - 收起完成后必须清空
max-height（设为0）并设overflow: hidden，否则可能影响布局或焦点管理
示例节选（无框架）：
const toggleBtn = document.querySelector('.toggle-btn');
const content = document.querySelector('.fold-content');
toggleBtn.addEventListener('click', () => {
const isExpanded = content.getAttribute('aria-expanded') === 'true';
if (isExpanded) {
content.style.maxHeight = '0';
content.style.overflow = 'hidden';
content.setAttribute('aria-expanded', 'false');
} else {
content.style.maxHeight = content.scrollHeight + 'px';
content.setAttribute('aria-expanded', 'true');
// 动画结束后恢复 overflow: visible（可选）
setTimeout(() => {
if (content.getAttribute('aria-expanded') === 'true') {
content.style.overflow = 'visible';
}
}, 300);
}
});
用 aria-expanded 和 aria-controls 保证可访问性
视觉上折叠了，但屏幕阅读器不知道状态——这不算“可用”。必须手动维护 ARIA 属性：
-
aria-expanded="true/false"加在触发按钮（如button）上 -
aria-controls="content-id"指向被折叠区域的id，建立关联 - 被折叠内容区建议用
role="region"并配aria-labelledby，明确语义 - 键盘操作必须支持
Enter和Space触发，且焦点不能丢失（展开后最好focus()到内容首子元素）
多个折叠项共存时避免状态混乱
常见错误是用同一个变量或 class 控制所有折叠项，导致点一个全开/全关。正确做法：
- 每个折叠组应有独立的 DOM 结构上下文（比如用
closest('.accordion-item')定位当前项） - 避免全局状态变量；用
dataset存状态，例如btn.dataset.expanded = 'true' - 如果要做“单开模式”（展开一个则收起其他），遍历兄弟节点时注意排除自身，且只操作同级折叠项，别误触嵌套结构
- 初始化时检查 DOM 是否已含
aria-expanded，防止服务端渲染（SSR）和客户端 JS 状态不一致
最易被忽略的是过渡结束时机判断——用 transitionend 代替固定 setTimeout 更健壮，但要注意触发多次（如快速连点）会导致事件堆积，需加防抖或状态锁。
