在网页开发场景中，内容折叠与展开是提升信息展示效率的常用交互设计，比如常见问题解答区域、长文本摘要展示等场景都会用到。传统的实现方式往往需要配合JavaScript编写点击事件逻辑，而HTML5新增的details和summary元素可以让我们仅用纯HTML和CSS就完成完整的折叠展开功能。
details和summary元素基础用法
details是一个容器元素，用于包裹需要折叠展开的内容，它本身有一个open布尔属性，用来控制内容默认是否展开。summary是details的直接子元素，作为折叠区域的标题，点击summary区域就会切换details内容的显示状态。
最基础的代码结构如下：
<details>
<summary>点击查看基础信息</summary>
<p>这是被折叠的内容，默认情况下不会显示在页面上，点击上方标题后会展开显示。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</details>
核心属性说明
- open：添加到
details元素上，值为布尔类型，设置后内容默认展开。例如<details open>会让内容初始状态就可见。 - name：HTML5.1新增的属性，用于给多个
details元素分组，同一组的details元素同时只能展开一个，类似手风琴效果。
用CSS自定义折叠展开样式
默认的details和summary样式比较朴素，我们可以通过CSS自定义展开收起图标、标题样式、内容区域样式等。需要注意的是，summary元素默认有点击交互的样式，我们可以覆盖默认的列表标记来替换图标。
下面的示例实现了自定义展开图标，并且添加了过渡动画效果：
/* 隐藏默认的summary标记 */
details summary {
list-style: none;
cursor: pointer;
padding: 12px 16px;
background-color: #f5f5f5;
border-radius: 4px;
font-size: 16px;
position: relative;
}
/* 自定义展开图标，使用伪元素实现 */
details summary::before {
content: "+";
position: absolute;
right: 16px;
font-size: 18px;
transition: transform 0.3s ease;
}
/* 展开时图标变为-，并且旋转效果 */
details[open] summary::before {
content: "-";
transform: rotate(180deg);
}
/* 内容区域样式 */
details .content {
padding: 16px;
border: 1px solid #eee;
border-top: none;
border-radius: 0 0 4px 4px;
animation: fadeIn 0.3s ease;
}
/* 淡入动画 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
对应的HTML结构调整为：
<details>
<summary>自定义样式的折叠区域</summary>
<div class="content">
<p>这里是通过CSS自定义后的折叠内容，点击标题可以看到图标切换和过渡动画效果。</p>
<p>内容区域可以放置任意HTML元素，包括文本、图片、表单等。</p>
</div>
</details>
手风琴效果实现
如果需要实现多个折叠区域同时只能展开一个的手风琴效果，只需要给多个details元素添加相同的name属性即可，无需额外编写JavaScript逻辑。
<details name="accordion"> <summary>第一个手风琴项</summary> <div class="content">第一个项的内容</div> </details> <details name="accordion"> <summary>第二个手风琴项</summary> <div class="content">第二个项的内容</div> </details> <details name="accordion"> <summary>第三个手风琴项</summary> <div class="content">第三个项的内容</div> </details>
兼容性与注意事项
details和summary元素的兼容性已经覆盖绝大多数现代浏览器，包括Chrome、Firefox、Safari、Edge等，仅IE浏览器完全不支持。如果项目需要兼容IE，还是需要配合JavaScript实现降级方案。
另外需要注意，summary必须是details的第一个直接子元素，否则无法触发折叠展开的交互效果。如果details内部没有summary元素，浏览器会自动生成一个默认的摘要文本，不同浏览器的默认文本可能不同，建议始终显式添加summary元素保证一致性。
纯HTML/CSS实现的折叠展开方案相比JavaScript方案，代码量更少，没有脚本依赖，页面加载速度更快，适合对交互要求不复杂的场景使用。