details 元素需含 summary 子元素才能触发默认折叠交互，否则虽渲染隐藏却无法展开；其核心优势在于语义明确、无障碍支持完善、CSS 可直接用 [open] 选择器控制样式，且避免 FOUC 和 JS 状态管理。

details 元素本身不要求内容必须“可收起”，但浏览器只会在有 summary 子元素时提供默认交互行为；没有 summary，details 仍会渲染为隐藏状态，但用户无法点击触发展开——这常被误认为“不工作”。

为什么用 details 而不是手写 JS 控制 display

核心区别不在“能不能实现”，而在语义、无障碍和默认行为是否对齐用户预期：

• details 自带 open 布尔属性，CSS 可直接用 details[open] 选择器做样式区分，无需监听事件或维护状态变量
• 屏幕阅读器会自动识别 details/summary 的折叠状态，并朗读 aria-expanded（浏览器内部已实现，不用手动加）
• 移动端长按 summary 会触发原生菜单（如“在新标签页中打开”），而纯 div + JS 方案需额外处理
• 服务端渲染时，details open 可让内容初始就展开，JS 方案则必然存在 FOUC（闪白）或延迟渲染

summary 里能放什么？哪些写法会破坏折叠功能

summary 必须是 details 的**第一个子元素**，且只能有一个。常见破坏点：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 开头有空格、换行或注释：浏览器会把文本节点当作第一个子节点，导致 summary 失效
• 嵌套了 button 或 a：部分浏览器（如旧版 Safari）会拦截点击事件，使折叠失效
• 用了 display: contents 或 visibility: hidden：视觉上不可见，但语义结构仍在；真正要隐藏标题应改用 CSS clip-path 或 position: absolute; clip: rect(0 0 0 0)，否则辅助技术仍会读出空标题

正确写法示例：

<details>
  <summary>配置项</summary>
  <p>这里是详细说明…</p>
</details>

折叠后内容还参与布局吗？hidden 和 details 的渲染差异

是的，details 折叠时内容仍存在于 DOM 中，只是 display 被设为 none（浏览器内建行为）。这意味着：

立即学习“前端免费学习笔记（深入）”；

• 它仍占用文档流位置（如果父容器有 height 限制，可能撑高容器）
• 里面的 iframe、video、audio 会被暂停或卸载（取决于浏览器，Chrome 会卸载 iframe，Firefox 则保留）
• 与 hidden 属性不同：hidden 是通用隐藏指令，对所有元素生效，但不提供任何交互钩子；details 是专用语义组件，自带状态切换能力
• 若需“完全移除渲染影响”，得配合 CSS：

  details:not([open]) .collapsible-content { display: none; }

  再把内容包进一个带 class 的容器里

真正容易被忽略的是：当多个 details 嵌套时，外层折叠不会自动关闭内层——每个 details 状态独立，没有父子联动逻辑。需要联动就得用 JS 监听 toggle 事件并手动控制其他元素的 open 属性。