使用details和summary标签可创建原生可折叠内容，提升信息组织与用户体验。
在HTML中设置细节内容，我们主要依赖
details和
summary这两个语义化标签。
summary标签作为
details的标题或可见部分，点击它就能展开或收起
details标签内部的隐藏内容。这提供了一种原生、无需JavaScript即可实现的交互式内容展示方式，非常适合那些需要按需显示信息的场景。
解决方案
要实现可折叠的细节内容，你只需要将需要隐藏的内容包裹在
标签中，然后将可见的标题或摘要放在
标签内，作为
的第一个子元素。
一个基本的结构会是这样：
点击这里查看更多详情
这是被隐藏的详细内容。当用户点击上面的摘要时，这段内容就会显示出来。
立即学习“前端免费学习笔记（深入）”；
- 项目一
- 项目二
你可以放任何HTML元素在这里面，比如图片、表格甚至其他嵌套的details。
这个详情默认是展开的
通过添加`open`属性，你可以让details元素在页面加载时就处于展开状态。
默认情况下，
details元素是折叠的，只显示
summary的内容，旁边会有一个小箭头指示其可展开。当用户点击
summary时，
details会展开，显示所有内部内容，箭头也会相应旋转。如果需要默认展开，只需在
标签上添加
open属性即可。
details
和summary
标签在用户体验设计中有何独特优势？
从我个人的经验来看，
details和
summary标签在提升用户体验方面，简直是化繁为简的利器。它们最显著的优势在于能够有效管理信息密度，避免页面内容过于冗长或杂乱。想象一下，一个FAQ页面，如果所有问题和答案都平铺直叙，用户可能需要滚动很久才能找到自己关心的点。但如果使用
details，就能将答案隐藏起来，只展示问题，页面瞬间清爽许多。
这种按需加载信息的模式，不仅减少了用户的认知负担，也让页面加载初期显得更轻巧。用户可以主动选择是否深入了解某个细节，这种控制感本身就是一种很好的体验。而且，由于它是原生HTML特性，无需JavaScript就能实现基础功能，这意味着更好的可访问性和更快的渲染速度。对于那些对性能和无障碍设计有严格要求的项目，这几乎是首选。它提供了一种语义化的方式来表示“这是可选的详细信息”，而不是简单地通过CSS
display: none来隐藏。
如何通过CSS自定义details
和summary
的外观与交互？
虽然
details和
summary提供了原生的交互，但其默认外观可能并不总是符合设计需求。幸运的是，它们对CSS非常友好。
最常见的需求之一就是自定义那个默认的展开/折叠箭头。你可以通过设置
summary元素的
list-style: none;来移除它，然后用伪元素（
::before或
::after）或者背景图片来替换成你自己的图标。
/* 移除默认箭头 */
summary {
list-style: none; /* 针对WebKit/Blink浏览器 */
/* Firefox的默认箭头可能需要-moz-list-bullet或类似的属性，但list-style通常足够 */
cursor: pointer; /* 提示用户这是一个可点击的元素 */
padding: 10px;
background-color: #f0f0f0;
border-bottom: 1px solid #ddd;
font-weight: bold;
display: block; /* 确保它独占一行 */
}
/* 针对Firefox，可能需要额外处理伪元素 */
summary::-webkit-details-marker {
display: none; /* 针对Chrome/Safari等 */
}
summary::marker { /* 针对Firefox */
display: none;
}
/* 自定义展开/折叠图标 */
summary::after {
content: '▶'; /* 默认是向右的箭头 */
float: right;
transition: transform 0.2s ease-in-out;
}
details[open] summary::after {
content: '▼'; /* 展开时向下 */
transform: rotate(90deg); /* 也可以是旋转90度 */
}
/* 样式化details内部内容 */
details p {
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #eee;
border-top: none;
}你可以自由地为
summary添加背景色、边框、字体样式等，让它看起来更像一个按钮或标题。当
details处于展开状态时，它会有一个
open属性，你可以利用
details[open]选择器来为展开状态下的
summary或内部内容添加特定的样式，比如改变背景色，或者让自定义的图标旋转。这给了我们极大的灵活性去匹配整体的UI设计风格。
在实际项目中，details
和summary
标签有哪些常见的应用场景和注意事项？
在实际开发中，
details和
summary标签的应用场景非常广泛，我个人最常用的就是：
-
常见问题解答（FAQ）：这是最经典的用法。每个问题作为
summary
，答案作为details
内容，页面既简洁又易于导航。 -
可折叠的导航菜单或子菜单：对于层级较深的导航，可以用
details
来隐藏子菜单，点击父级菜单展开。不过，对于复杂的导航，可能还需要JavaScript来处理多层展开或关闭其他菜单项的逻辑。 -
显示/隐藏可选表单字段：在一些复杂的表单中，某些字段可能是可选的，或者只有在特定条件下才需要填写。将这些字段放在
details
中，可以减少表单的视觉压力。 -
“阅读更多”或“查看更多信息”：当文章或产品描述过长时，可以将部分内容隐藏在
details
中，只显示摘要，让用户选择是否展开。 - 技术文档或代码示例：对于冗长的代码块或详细的技术解释，将其折叠起来可以提升文档的可读性。
至于注意事项，有几点是值得留意的：
-
无障碍性（Accessibility）：原生
details
和summary
在无障碍性方面表现良好，它们自带键盘导航（Tab键聚焦，Enter/Space键切换），并且屏幕阅读器也能很好地识别其语义。尽量避免使用JavaScript过度干预其默认行为，除非你完全理解并能妥善处理无障碍性问题。 -
SEO影响：虽然
details
内部的内容默认是隐藏的，但搜索引擎通常能够抓取并索引这些内容。所以，不用担心隐藏内容不被SEO收录。然而，对于最重要的关键词和核心信息，最好还是放在默认可见的部分，以确保其权重。 -
JavaScript的介入：尽管它们是原生的，但在某些高级场景下，你可能仍然需要JavaScript。比如，你可能想在用户展开
details
时发送一个分析事件，或者实现一个“手风琴”效果，即展开一个details
时自动关闭其他所有details
。这时，JavaScript就派上用场了，你可以监听toggle
事件。 -
浏览器兼容性：现代浏览器对
details
和summary
的支持都非常好，但在一些非常老的浏览器（如IE）中可能不被支持。如果需要兼容这些老旧环境，可能需要提供Polyfill或者回退方案。 -
内容适度：不要把所有内容都塞进
details
。关键信息、核心功能和用户必须看到的内容，应该始终保持可见。details
是用来隐藏“细节”的，不是用来隐藏“必需品”的。过度使用反而会让用户感到困惑或沮丧。
