<details>: 详情标签
最后更新：2026-10-13
<details>详情标签
表示一个可展开/折叠的披露组件，点击 summary 即可显示或隐藏内容。
| 分类 | 语义化 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </details> 标签 |
| 状态 | 标准 |
📝 语法
<details>可折叠内容</details>▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <details> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 默认折叠；加 open 属性可默认展开。无需 JS 即可实现折叠效果。
❓ 常见问题
Qdetails 不写 summary 会怎样？
A浏览器会用默认文字（如 Chrome 的「详细信息」）作为展开控件。想自定义按钮文字，必须提供
<summary> 作为第一个子元素——这也对可访问性更友好。Qdetails 如何默认展开？
A给
<details> 加布尔属性 open：<details open>，页面加载后即处于展开状态，用户仍可点击收起。用 JS 读写 details.open（布尔值）可编程控制展开收起。Qdetails 能做互斥展开的手风琴吗？
A原生
<details> 各自独立、不能互斥。新版规范引入了 name 属性：同名 <details name='faq'> 组成互斥组，同一时间只展开一个；老浏览器需用 JS 兜底实现。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
