用和最快实现原生折叠展开，无需JS、不依赖框架；必须为首个子元素，加open属性可默认展开，支持键盘操作与屏幕阅读器。
用 details 和 summary 最快实现点击折叠展开
原生 HTML 就有现成方案，不用写 JS、不依赖框架。details 是语义化容器，summary 是可点击标题栏，浏览器自动处理展开/收起状态和箭头图标。
常见错误是手动加 onclick 或用 div + CSS 类模拟，结果要管 class 切换、A11Y 属性、键盘支持，反而更重。
示例：
<details> <summary>点击展开说明</summary> <p>这里是被折叠的内容，可以是任意 HTML。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </details>
-
open属性可设默认展开：<details open></details> - 多个
details独立控制，互不影响 - 支持空格键/回车键触发，屏幕阅读器能识别状态变化
需要自定义样式时怎么改 summary 的箭头
浏览器默认在 summary 左侧加一个三角形，但无法用普通 CSS 选中——它属于 Shadow DOM 内部伪元素。得用特定伪类覆盖。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
Chrome / Edge / Safari 支持 ::marker，Firefox 用 ::-moz-details-marker：
summary::marker {
content: "▶ ";
}
details[open] > summary::marker {
content: "▼ ";
}
- 别用
summary::before，会和原生箭头并存 - 若要完全去掉箭头，设
summary::marker { content: ""; } - 图标用 Unicode 字符最兼容；用 SVG 需额外处理垂直对齐
想用按钮或图标代替文字标题怎么办
summary 里允许放任意 HTML，包括 button、img、图标字体，但要注意两点：
- 不要给内部
button加onclick，否则会和details自身的展开逻辑冲突 - 如果用了纯图标（无文字），必须加
aria-label或title，否则无障碍不可读 - 示例：
<summary><span aria-label="展开配置项">⚙️</span></summary>
旧浏览器不支持 details 怎么降级
IE 全系、老版 Safari（≤11.1）不支持。检测方式简单："open" in document.createElement("details") 返回 false 就得 fallback。
降级策略不是“全用 JS 重写”，而是最小干预：
- 用
details写结构，CSS 加details:not([open]) { display: block; }强制展开（保证内容可见） - JS 只补交互：监听点击后手动切
open属性，并加 class 控制显隐（如details.js-fallback） - 避免监听
click到summary上再阻止默认行为——这会破坏原生功能，应优先信任原生行为
真正麻烦的不是兼容性代码，而是团队里有人坚持“必须所有浏览器看起来一模一样”，结果把简洁的语义化组件硬套成 JS 控制的 div 堆砌。其实用户只关心能不能点开，不关心箭头动效是否 100% 一致。
