原生<details>不支持自定义动画、手风琴模式、嵌套控制及动态高度过渡，且toggle事件不可拦截、Safari对::marker渲染不稳定；需用max-height+JS手动实现，注意设置具体max-height值、读取scrollHeight、清理内联样式及overflow:hidden。
为什么原生 <details> 不够用？
原生 <details> + <summary> 能快速实现基础折叠，但一旦需要自定义动画、手风琴模式、嵌套控制或动态高度过渡，它就暴露局限：不支持 height 或 opacity 过渡，toggle 事件无法阻止默认行为，且 Safari 对 ::marker 渲染不稳定。真正“高度定制”，意味着你得接管状态、动画和 DOM 生命周期。
用 max-height + JS 实现平滑展开的关键点
这是目前最可控、兼容性最好的手动方案，核心是绕过 display: none 的硬切换，改用 max-height 配合 overflow: hidden 模拟高度变化。
-
max-height必须设为具体数值（如500px），不能用auto—— CSS 过渡不支持auto值 - 实际内容高度不确定时，JS 需在展开前读取
element.scrollHeight，再设为max-height - 收起时要把
max-height设回0，并等 transition 结束后清空内联样式，否则残留值会干扰下一次展开 - 别忘了加
overflow: hidden，否则内容可能溢出或滚动条闪现
如何让多个面板互斥（手风琴效果）
原生 <details> 是独立状态，要单开必须手动管理。监听点击后，先遍历所有同级面板，对非目标项调用收起逻辑，再展开当前项。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
data-accordion-group标记一组面板，避免跨区域误操作 - 收起动作建议带回调，确保上一个动画结束后再触发下一个，防止状态错乱
- 若用 class 切换（如
.is-open），记得同步更新aria-expanded和aria-controls属性，不然屏幕阅读器会丢失状态
嵌套折叠与复杂内容的陷阱
在折叠区域内放 <iframe>、<video> 或第三方 widget 时，收起状态不会自动暂停或卸载它们——资源仍在后台运行，可能卡顿或产生音频泄漏。
立即学习“前端免费学习笔记（深入）”；
- 监听
toggle或自定义展开事件，在open === false时手动执行：iframe.contentWindow?.document?.write('')或video.pause() - 嵌套多层折叠时，避免全用原生
<details>—— Safari 15.4 之前会丢失子级<summary>的点击响应 - 推荐外层用 JS 方案，内层用原生
<details>（仅当确认父容器不干扰 focus/keyboard 事件时）
真正难的不是写出展开逻辑，而是判断什么时候该放弃原生、什么时候该补可访问性、以及如何让动画和真实内容高度严丝合缝。这些细节不报错，但一上线就露馅。
