是浏览器原生支持的折叠组件，无需 JS 和 CSS 即可运行，语义正确、无障碍友好；必须将 作为其第一个子元素，否则失效；IE 不支持，现代浏览器均兼容；需自定义箭头或动画时应绕过 ::marker 改用 ::before；互斥效果需监听 toggle 事件；若需复杂动画、旧浏览器兼容或动态布局，直接使用 max-height + JS 更稳妥。
用 <details></details> 和 <summary></summary> 一行代码就能跑通
不需要 JS，不写 CSS，浏览器原生支持，键盘空格/回车可触发，屏幕阅读器能识别——<details></details> 就是为这设计的。常见错误是漏掉 <summary></summary>，或者把它写成第二个子元素，结果点不动。
基础写法就三行：
<details> <summary>点击展开</summary> <p>这里是内容</p> </details>
-
<summary></summary>必须是<details></details>的第一个子元素，否则折叠逻辑失效 - 默认收起；加
open属性（<details open></details>）可默认展开 - 内容区域自动参与文档流，不用设
height: 0或overflow: hidden - IE 完全不支持，其他现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge）均可用
summary::marker 在 Safari 里经常失效，改用 ::before
想换箭头图标、加旋转动画？别碰 summary::marker { content: "" } —— Safari 15.4 之前根本不认，而且就算认了，也无法加 transition。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
安全做法是彻底绕过 ::marker：
summary {
list-style: none;
}
summary::before {
content: "▶";
margin-right: 8px;
transition: transform 0.2s;
}
details[open] summary::before {
transform: rotate(90deg);
}
- 用
list-style: none隐藏原生箭头最稳妥，兼容性比::marker好得多 -
::before可以自由控制颜色、大小、旋转，且所有现代浏览器都支持 - 不要给
<details></details>设height过渡——它会破坏内部布局，且无实际动画效果
要互斥手风琴效果，JS 只需监听 toggle 事件
多个 <details></details> 默认各自独立，点一个不会关掉别的。要做 FAQ 那种“单开”效果，必须用 JS，但逻辑极简。
关键不是写多少代码，而是别踩两个坑：
- 用
toggle事件，不是click：后者无法响应键盘操作（空格/回车），toggle才是语义正确的触发时机 - 只操作
open属性，不删 DOM、不切display：比如遍历同级<details></details>，对非当前项调用.removeAttribute('open') - iOS Safari 15.4 以下不支持
toggle，需降级为click+ 检查hasAttribute('open')
什么时候该放弃原生方案，直接上 JS + max-height
只要出现以下任一情况，<details></details> 就不是“极简”，而是“埋坑”：
- 需要淡入淡出、缩放、或高度自适应动画（原生不支持任何过渡）
- 折叠区要嵌在
flex或grid容器里，且要求父容器尺寸随内容动态收缩（<details></details>在open状态下仍可能撑开父容器） - 项目必须兼容 IE 或旧版 Android WebView（
<details></details>在这些环境里等于不存在） - 内容高度不可预估，又不想 JS 测
scrollHeight（那还不如用固定max-height+overflow: hidden）
真正容易被忽略的点是：原生方案看似“零配置”，但一旦要动样式、加动画、控互斥、适配旧环境，JS 介入成本反而更高——这时候从一开始选 max-height + classList.toggle() 可能更省事。
