在网页开发中，折叠面板或展开/收起内容是非常常见的交互需求。过去，我们通常需要依赖JavaScript或复杂的CSS技巧来实现这一功能。而现在，HTML5提供了原生的 <details> 和 <summary> 标签，让我们可以无需编写任何JS代码，就能轻松实现内容的折叠与展开。
本文将详细介绍如何使用这两个标签，并提供自定义样式和高级用法的示例。
一、 基础语法与用法
<details> 标签用于创建一个可折叠的区域，而 <summary> 标签则作为该区域的可见标题。当用户点击 <summary> 时，<details> 内部的其他内容就会自动展开或收起。
基础代码示例：
<details> <summary>点击展开查看更多内容</summary> <p>这里是隐藏的折叠内容，点击summary标签后才会显示出来。</p> </details>
在默认情况下，内容是处于折叠状态的。用户点击标题后，浏览器会自动处理展开逻辑，并在标题旁显示一个默认的小三角箭头。
二、 默认展开状态
如果你希望页面加载时，折叠内容就是展开的状态，只需要给 <details> 标签添加 open 属性即可。
<details open> <summary>默认展开的内容</summary> <p>这段内容在页面加载时就会直接显示，不需要用户点击。</p> </details>
三、 自定义样式
虽然原生标签非常方便，但默认的样式（尤其是那个小三角箭头）往往无法满足UI设计的需求。我们可以通过CSS来美化它，包括隐藏默认箭头、添加动画等。
1. 隐藏默认三角箭头
不同浏览器处理默认箭头的伪元素不同，我们需要同时兼容WebKit和Firefox：
summary {
list-style: none; /* 兼容 Firefox */
cursor: pointer; /* 鼠标悬浮变为手型 */
}
summary::-webkit-details-marker {
display: none; /* 兼容 Chrome, Safari, Edge */
}2. 添加自定义图标和边框
我们可以利用CSS的伪元素 ::before 或 ::after 来添加自定义的展开/收起图标，并为容器添加边框：
details {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
background-color: #fff;
transition: all 0.3s ease;
}
summary {
font-weight: bold;
font-size: 16px;
color: #333;
position: relative;
padding-right: 20px; /* 为图标留出空间 */
}
/* 使用伪元素制作自定义加号图标 */
summary::after {
content: '+';
position: absolute;
right: 0;
top: 0;
font-size: 20px;
color: #666;
transition: transform 0.3s;
}
/* 展开时将加号旋转为叉号（或减号） */
details[open] summary::after {
content: '-';
}
details[open] {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}四、 嵌套折叠内容
<details> 标签支持嵌套使用，这意味着你可以轻松创建多级折叠菜单或复杂的FAQ页面。
<details> <summary>第一级：前端开发</summary> <p>前端开发包含以下主要技术：</p> <!-- 嵌套的第二级 --> <details style="margin-top: 10px; margin-left: 20px;"> <summary>第二级：HTML & CSS</summary> <p>HTML负责页面结构，CSS负责页面样式。</p> </details> <details style="margin-top: 10px; margin-left: 20px;"> <summary>第二级：JavaScript</summary> <p>JavaScript负责页面的动态交互逻辑。</p> </details> </details>
五、 与JavaScript结合
虽然 <details> 和 <summary> 不需要JS就能工作，但在某些场景下，我们可能需要监听展开/收起的事件，比如用于数据统计或联动控制。浏览器提供了 toggle 事件来满足这一需求。
// 获取details元素
const detailsEl = document.querySelector('details');
// 监听toggle事件
detailsEl.addEventListener('toggle', function(event) {
if (detailsEl.open) {
console.log('内容已展开');
// 可以在这里发送数据统计请求
} else {
console.log('内容已折叠');
}
});六、 浏览器兼容性
<details> 和 <summary> 标签目前得到了所有主流现代浏览器的广泛支持（包括Chrome, Firefox, Safari, Edge）。对于极少数需要兼容老旧浏览器（如IE11）的项目，可以引入 html-details-summary 等Polyfill来提供降级支持。
总结
使用HTML原生的 <details> 和 <summary> 标签实现折叠内容具有显著的优势：
零JS依赖：减少代码量，提升页面加载性能。
语义化良好：对搜索引擎和屏幕阅读器非常友好，提升了网站的无障碍访问（A11y）能力。
开发效率高：几行HTML代码即可完成过去需要大量CSS+JS才能实现的交互。
如果你需要一个在线演示来查看实际效果，可以访问 www.ipipp.com 获取更多实战案例和代码片段。在下一次需要实现折叠面板时，不妨优先考虑这个原生HTML方案！