details+summary是浏览器原生支持的语义化折叠模块，无需JS/CSS即可运行；summary必须紧随details标签后、不可有空格或换行；默认收起，加open属性可默认展开；IE不支持，需兼容时才用JS方案。
用 details + summary 搭建最简折叠模块
直接写 HTML 就能跑，不用 JS、不配 CSS 也能工作。这是当前浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）原生支持的语义化方案，键盘可操作、屏幕阅读器能识别。
常见错误是把 summary 写成第二个子元素，比如中间加了空格、换行或 <p></p> 标签——此时点击完全没反应，summary 会被当作文本渲染。
-
summary必须紧跟在<details></details>开始标签后，不能有空格、换行、注释或其他 DOM 节点 - 所有标题文字、图标、按钮（如“编辑”“复制”）都得塞进
summary标签内部，不能放在它外面 - 默认收起；需要默认展开，直接加
open属性：<details open></details> - IE 不支持，若需兼容 IE，才考虑 JS 方案（如 class 切换 +
max-height）
自定义 summary 样式但不破坏交互
可以直接改颜色、字体、内边距，但不能动语义关键属性。比如设 display: block 或 position: relative 通常没事，但设 display: flex 可能干扰焦点逻辑，pointer-events: none 会彻底禁用点击。
隐藏原生箭头并加旋转图标，推荐用 ::before 而非 ::marker，因为后者在 Safari 15.4 之前支持差：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
summary {
list-style: none;
}
summary::before {
content: "▶";
margin-right: 8px;
transition: transform 0.2s;
}
details[open] summary::before {
transform: rotate(90deg);
}- 别给
summary加role="button"或tabindex：它本来就是可聚焦按钮，加了反而可能重复触发 - 想让图标响应更快？用
transform: scaleY()动画比max-height更稳，无需测量内容高度 - 如果要在点击时记录埋点或联动其他组件，监听
details元素的toggle事件，不是summary的click
JS 控制开闭状态时的 Safari 兼容陷阱
Safari ≤ 15.4 中，运行时设置 details.open = true 或 details.setAttribute('open', '') 常常无效：DOM 上已标记 open，但视觉仍是收起状态。
- 初始化展开必须靠 HTML 写死：
<details open></details>，别指望 JS 在DOMContentLoaded里补 - 运行时切换优先用
details.toggle()方法，它在 Safari 15.3+ 中兼容性明显好于直接赋值 - 仍要兼容 Safari 15.3 及更早？可在
DOMContentLoaded后加一行details.offsetHeight强制重排，再调用toggle() - 批量操作（如“全部展开”）时，只读写
open属性，不要删节点、切class或改style.display—— 这会绕过原生逻辑，丢掉无障碍能力
加动画时为什么别碰 max-height？
很多人用 max-height: 0 → max-height: 500px 配合 transition 实现高度过渡，但内容高度不确定，固定值要么裁剪文字，要么留大片空白。
更可靠的做法是放弃高度动画，只做 opacity 和 transform: scaleY()：
details > * {
opacity: 0;
transform: scaleY(0);
transform-origin: top;
transition: opacity 0.2s, transform 0.2s;
}
details[open] > * {
opacity: 1;
transform: scaleY(1);
}- 如果非要用高度动画，必须用 JS 测量真实高度再设
max-height，不能硬编码 -
height: auto无法参与 CSS 过渡，所以不能用height: 0→height: auto - 所有动画属性必须是可合成的（
opacity、transform），避免触发布局重排
真正容易被忽略的是：一旦你开始手动控制 display、height 或增删 class，你就已经放弃了 details 的语义和可访问性优势。不是“能动就行”，而是“动得对不对”。
