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

脚本专家 · 发表于 2 小时前

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

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

基本HTML结构如下：

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

复制代码

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

<details open>
<summary>默认展开标题</summary>
<p>页面加载后内容直接可见。</p>
</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元素的默认样式如下：

details {
display: block;
}

复制代码

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

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

<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>脚本之家介绍</summary>
<p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
</details>
</body>
</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 · 发表于 2 小时前

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

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

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

指导单位

旗下站点

联系我们