HTML5 details与summary标签：手把手实现可折叠内容组件

脚本专家

在前端开发中，经常需要实现可折叠或可展开的交互组件，比如FAQ、详情说明、设置面板等。过去我们通常依赖JavaScript和CSS手工构建，但现在HTML5原生提供了details和summary标签，可以零JavaScript实现可折叠内容。本文将详细介绍details标签的用法、属性、默认样式，并给出可直接运行的示例代码。

一、details与summary基础用法
details标签用于创建用户可打开或关闭的交互式小部件，默认状态下内容隐藏，点击后展开显示。summary标签必须嵌套在details内部，作为可见的标题标签，用户点击summary即可切换details的展开/收起状态。

基本HTML结构如下：

2. <details>
3.   <summary>点击展开标题</summary>
4.   <p>这里是详细内容，可以是任何HTML元素，包括文本、图片、表格等。</p>
5. </details>

复制代码

二、重要属性：open
details标签支持一个布尔属性open，当在标签上添加open属性时，初始状态即为展开状态。例如：

2. <details open>
3.   <summary>默认展开标题</summary>
4.   <p>页面加载后内容直接可见。</p>
5. </details>

复制代码

若不添加open属性，则默认关闭。

三、浏览器兼容性
details和summary标签的浏览器支持情况如下（数字为首个完全支持该元素的版本）：
- Chrome 12.0+
- Edge 79.0+
- Firefox 49.0+
- Safari 6.0+
- Opera 15.0+
对于不支持的老旧浏览器（如IE），可将details视为普通块级元素（display: block），内容始终可见，但不会实现可折叠交互。通常可以配合polyfill或降级处理。

四、默认CSS样式
大多数浏览器对details元素的默认样式如下：

2. details {
3.   display: block;
4. }

复制代码

summary的默认样式为list-item类型，会显示一个三角形指示符（如▶/▼）。不同浏览器可能略有差异。

五、自定义样式实例
我们可以通过CSS定制details和summary的外观，实现更美观的可折叠组件。以下是一个完整示例，包含HTML和CSS：

2. <html>
3. <style>
4. details > summary {
5.   padding: 4px;
6.   width: 200px;
7.   background-color: #eeeeee;
8.   border: none;
9.   box-shadow: 1px 1px 2px #bbbbbb;
10.   cursor: pointer;
11. }
12. details > p {
13.   background-color: #eeeeee;
14.   padding: 4px;
15.   margin: 0;
16.   box-shadow: 1px 1px 2px #bbbbbb;
17. }
18. </style>
19. <body>
20. <details>
21.   <summary>脚本之家介绍</summary>
22.   <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
23. </details>
24. </body>
25. </html>

复制代码

在这个示例中，summary区域宽度固定200px，统一背景色和阴影，鼠标悬停变为手型（cursor: pointer）。内容段落也应用相同的背景和阴影，视觉上连贯一致。

六、实际开发场景与注意事项
1. 适用场景：FAQ列表、折叠面板、详情说明、配置项分组等，无需引入任何JavaScript框架即可实现基础交互。
2. 无障碍访问：summary标签默认具有按钮角色（role=button），键盘用户可通过Tab聚焦并按Enter/Space切换展开状态。
3. 嵌套限制：details内部不能直接包含summary之外的块级文本，但可以嵌套其他details实现多级折叠。
4. 动态控制：如需用JavaScript控制展开状态，可通过设置details.open = true/false，或触发click事件。

七、总结
details和summary是HTML5提供的原生可折叠组件，语法简洁、兼容性良好、无障碍友好，适合替代简单的JS手风琴效果。在实际项目中，可结合CSS灵活定制样式，快速实现交互功能。

热心网友2

感谢楼主的详细介绍！details和summary确实是很实用的原生标签，以前做FAQ或折叠面板时总得依赖JavaScript手写展开收起逻辑，现在直接用HTML就能搞定，代码干净多了。那个含open属性默认展开的例子特别适合“首次加载提示”的场景，配合简单的CSS阴影效果就能做出不错的UI。想问一下，如果有多组details需要同一时间只展开一个（类似手风琴效果），是否有纯HTML/CSS的简单实现方式？还是必须借助JavaScript来控制呢？

热心网友6

非常实用的教程！之前做折叠面板总要用一堆JS，没想到原生标签就能解决。试了下示例代码，在Chrome和Edge上都跑得很流畅。那个默认的小三角符号我觉得挺好看的，不过用CSS隐藏掉改成自定义图标也很方便。想请教一下，如果我想在details里面嵌套另一个details实现二级折叠，需要注意什么？比如内层details的summary点击会不会影响到外层的展开状态？

热心网友6

感谢楼主的详细分享！一直知道有 `` 和 `` 这两个标签，但没仔细研究过。看了你的文章，发现原来连默认的三角指示符都可以通过 CSS 去掉或替换，而且不需要写一行 JS 就能实现折叠效果，太方便了。我之前做 FAQ 页面还在手动写 JS 切换 display，回头就改成这个方案。另外，嵌套多个 details 做多级折叠的提示也很实用，收藏了！