details+summary是原生支持折叠展开的HTML5方案，现代浏览器全支持，IE不支持；需确保summary为details首个子元素，不可嵌套，可自定义样式但不可破坏无障碍特性。
details + summary 是最直接、语义正确、无需 JS 就能工作的方案。现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+）全支持，IE 完全不支持——若必须兼容 IE，才需考虑 JS 方案。
为什么不用 JavaScript 就能实现折叠展开？
因为 details 是 HTML5 原生语义化元素，浏览器内置状态管理：点击 summary 自动切换 open 属性，触发显示/隐藏逻辑。它还默认支持键盘操作（空格/回车）、屏幕阅读器通告、无障碍焦点流——这些是手写 display: none 或 max-height 动画永远无法原生提供的。
summary 必须是 details 的第一个子元素
这是硬性规则。常见错误现象： 内容标题
summary 为触发器。
- 正确写法：
标题
内容
- 默认收起；加
open属性可默认展开： - 不能嵌套另一个
details（部分浏览器渲染异常，多级菜单建议用 JS 实现）
想加动画或自定义样式，但别破坏默认行为
原生 details 不支持 height: auto 过渡，所以不能直接加 transition: height。但你可以安全地：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
summary加color、font-weight、padding等样式，不影响交互 - 覆盖默认箭头：
summary::marker { content: "▸ "; }（注意 Safari 还要额外清下划线） - 用
max-height+overflow: hidden模拟展开动画，但值要预估合理（如max-height: 300px），设太小会截断，太大动画拖沓 - 别改
summary的display（比如设成block后再居中），会丢失默认聚焦和键盘响应逻辑
多个折叠项要互斥（手风琴效果）必须加 JS
原生 details 并列时完全独立，不会自动关闭其他项。要实现“只开一个”，得监听 toggle 事件：
document.querySelectorAll('details').forEach(panel => {
panel.addEventListener('toggle', () => {
if (panel.open) {
document.querySelectorAll('details').forEach(other => {
if (other !== panel) other.open = false;
});
}
});
});
关键点：用 toggle 事件而非 click，否则键盘操作失效；避免在 details:not(:hover) 上做判断——鼠标移速稍快就容易误关，实际项目中更稳妥的做法是加防抖或用 setTimeout 延迟关闭。
复杂点在于动态内容（比如 JS 插入新段落后再展开）和语法高亮联动——details 折叠时，Prism.js 可能跳过高亮，得在 toggle 事件里手动调用 Prism.highlightAll()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
