使用html的details和summary标签可实现无需javaScript的可折叠面板，默认收起，点击summary展开内容，支持open属性默认展开，配合css可自定义样式如添加箭头图标、边框等，主流浏览器兼容性良好，适用于高效组织网页内容。
在网页中实现可折叠的面板效果，可以使用HTML的 details 和 summary 标签。它们原生支持展开与收起功能，无需javascript，再配合CSS可以轻松自定义外观样式。
基础用法：details 与 summary 标签
details 标签定义一个可折叠的区域，summary 标签用于指定该区域的标题或摘要。用户点击 summary 时，details 内容会自动展开或收起。
示例代码：
<details>
<summary>点击展开说明</summary>
<p>这里是折叠后的内容，只有展开时才可见。</p>
</details>
默认行为与浏览器支持
details 标签默认处于收起状态。打开页面时内容隐藏，点击 summary 才显示。目前主流浏览器（chrome、edge、firefox、safari）都支持该标签，但在部分旧版本中可能表现不一致，需注意兼容性。
立即学习“前端免费学习笔记（深入）”；
一些关键点：
- details 可以设置 open 属性来默认展开：
<details open> - 一个 details 中只能有一个 summary，且必须是第一个子元素
- 除了 summary，其余内容都会在收起时隐藏
使用CSS自定义样式
虽然原生功能已可用，但默认样式较简陋。通过CSS可以美化 summary 的外观，比如添加图标、调整边框、背景色等。
示例：添加小箭头图标并美化面板
<style>
details {
border: 1px solid #ddd;
border-radius: 6px;
padding: 0.5em 0.8em;
margin-bottom: 1em;
}
summary {
cursor: pointer;
font-weight: bold;
list-style: none;
}
summary::after {
content: ” ▶”;
font-size: 0.8em;
color: #666;
}
details[open] summary::after {
content: ” ▼”;
}
</style>
这里利用 ::after 伪元素添加了展开/收起的小图标，并通过 [open] 属性选择器切换图标方向，提升用户体验。
进阶技巧与注意事项
若需要更复杂的动画或样式控制，可结合CSS过渡效果：
- 给 details 内容区域设置
max-height + overflow: hidden实现平滑展开动画 - 注意移动端点击区域应足够大，避免操作困难
- 可为 summary 添加键盘支持（如回车触发），增强可访问性
- 避免在 summary 内使用按钮或其他可点击元素，以免事件冲突
基本上就这些。用 details + summary 实现折叠面板简单高效，加上一点CSS就能满足大多数场景需求，不复杂但容易忽略细节。合理使用能显著提升内容组织效率。