原生 元素5秒内可用，无需JS/CSS，自带键盘可访问性、屏幕阅读器支持和焦点管理；IE不支持需特性检测；样式定制应保留语义，用 ::before 替代默认箭头；不支持高度过渡，需JS模拟；动态内容需手动同步状态。
直接用 <details></details> + <summary></summary>，5 秒内就能跑通，不需要 JS、不写 CSS 也能工作。
为什么不用自己写 toggle + display 切换
手写 JS 控制 display 或 visibility 看似灵活，但会丢掉三样关键东西：键盘可访问性（空格/回车无法触发）、屏幕阅读器识别（aria-expanded 不自动同步）、焦点管理（Tab 键跳过内容）。原生 <details></details> 自带这些，不是“省事”，而是“少出错”。
-
<summary></summary>必须是<details></details>的第一个子元素，否则点击无反应 - IE 完全不支持，如需兼容，先做特性检测：
if ('open' in document.createElement('details')) - 不要给
<summary></summary>加onclick，应监听<details></details>的toggle事件——否则键盘操作不会触发回调
怎么让 details 看起来不像浏览器默认样式
原生箭头在 Safari 中对 ::marker 支持不稳定，统一用 ::before 更可靠。关键点在于保留语义和交互逻辑，只动视觉。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 隐藏默认箭头：
summary { list-style: none; } - 补自定义图标：
summary::before { content: "▶"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: transform 0.2s; } - 展开时旋转：
details[open] summary::before { transform: translateY(-50%) rotate(90deg); } - 别依赖
details[open]在旧 Safari 中精准匹配，可配合 JS 添加is-open类兜底
需要高度过渡动画？必须换方案
<details></details> 不支持 height 或 max-height 过渡——它靠浏览器底层控制显隐，CSS 动画插不进去。要滑动展开效果，就得放弃原生行为，改用 JS + max-height 模拟。
立即学习“前端免费学习笔记（深入）”；
- 用
max-height时，值不能设auto，得预估一个足够大的固定值（比如500px）或运行时读取scrollHeight - 记得加
overflow: hidden，否则内容会撑开容器 - 如果内容含图片或 iframe，
<details></details>展开后不会自动触发 lazy-load，需监听toggle事件手动处理 - 多个
<details></details>要互斥（手风琴效果），JS 只需遍历兄弟节点并关闭其他：details.forEach(d => d !== target && (d.open = false))
真正容易被忽略的，是内容动态加载后的状态同步：比如展开后插入了新 DOM，scrollHeight 变了，但 max-height 还卡在旧值；或者用户用键盘打开后，焦点没落到内容首元素上。这些不是“锦上添花”，而是影响实际可用性的硬伤。
