details 和 summary 是 html 原生提供的折叠/展开组件，其中 details 为容器，summary 为触发标题；2. 它们适用于 faq 页面、补充信息展示、法律条款摘要、技术细节隐藏等场景；3. 可通过 css 自定义样式（如替换默认箭头、添加悬停效果）和 javascript 实现动画、手风琴效果及状态监听；4. 使用时需注意浏览器兼容性（ie 不支持）、seo（内容可被搜索引擎索引）、无障碍性（避免破坏原生语义）、动画限制（需 js 模拟平滑过渡）以及 summary 必须作为 details 的第一个子元素且不可错序嵌套。
details 和 summary 这两个 HTML 标签，说白了，就是浏览器原生提供的一种折叠/展开内容的小组件。details 是外层的容器，它包裹着所有可折叠的内容；而 summary 则是这个容器的“标题”或者说“触发器”，你点击它，details 里面的内容就会展开或收起。它们最大的好处是，不用写一行 JavaScript 就能实现一个基本的交互式内容区域，对于一些简单的信息展示，简直是福音。
要实现折叠内容，核心就是利用 details 和 summary 这对搭档。它们的用法非常直观：
首先，你需要一个 details 标签作为整个可折叠区域的容器。
接着，在 details 标签内部，第一个子元素必须是 summary 标签。这个 summary 标签里的内容就是用户能看到的、用来点击展开/收起的标题。
然后，summary 标签之后的所有内容，直到 details 标签闭合，都会被视为可折叠的内容。
默认情况下，details 元素是收起状态的。如果你想让它一开始就是展开的，可以在 details 标签上添加一个 open 属性，像这样：<details open>。
一个简单的例子就像这样：
<details>
<summary>点击这里查看更多信息</summary>
<p>这是一段被折叠起来的内容。它可能是更详细的说明，一个常见问题的答案，或者任何你不想一开始就展示给用户的信息。</p>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</details>
<details open>
<summary>这段内容默认是展开的</summary>
<p>因为我在 details 标签上加了 'open' 属性。</p>
</details>这种原生支持的折叠功能，在语义化和可访问性方面表现得非常出色，浏览器会处理好基本的交互和焦点管理。
在我看来，details 和 summary 标签在很多日常的网页设计场景中，简直是“小而美”的解决方案。最典型的就是 FAQ（常见问题解答） 页面。想象一下，一个长长的 FAQ 列表，如果所有答案都直接铺开，页面会显得非常冗长。但如果每个问题都用 details 和 summary 包裹起来，用户只需要点击自己关心的问题，答案才会展开，大大提升了阅读体验。
除了 FAQ，它们也很适合用于：
summary 里，完整的详细内容则放在 details 里，让用户选择性阅读。它们的好处在于，原生支持意味着更好的性能和无障碍性。浏览器知道这是一个可折叠的组件，屏幕阅读器也能正确地识别和播报其状态（展开或收起），键盘用户也能通过空格键或回车键进行操作，这比你自己从零开始用 JavaScript 和 ARIA 属性构建一个要省心得多。当然，对于特别复杂的交互，比如要求一次只能展开一个面板的手风琴，或者需要高度自定义动画的场景，可能还是需要 JavaScript 的介入，但对于基础需求，它们已经绰绰有余了。
虽然 details 和 summary 提供了开箱即用的折叠功能，但默认的样式可能略显朴素，而且交互上也有提升空间。通过 CSS 和一点点 JavaScript，我们能让它们看起来更专业，用起来更顺手。
CSS 增强：
最常见的需求就是改变那个默认的三角形图标，或者给 summary 加上一些视觉提示，比如鼠标悬停时的样式。
自定义默认箭头： 那个小小的三角形其实是 ::marker 伪元素。你可以通过 summary::marker 来控制它的样式，比如隐藏它，然后用 ::before 或 ::after 伪元素来替换成自定义的图标（例如一个加号/减号）。
details {
margin-bottom: 10px;
border: 1px solid #eee;
border-radius: 4px;
}
summary {
padding: 10px 15px;
background-color: #f7f7f7;
border-bottom: 1px solid #eee;
cursor: pointer;
font-weight: bold;
list-style: none; /* 移除默认的列表标记 */
position: relative;
}
/* 隐藏默认的箭头 */
summary::-webkit-details-marker,
summary::marker {
display: none;
}
/* 添加自定义的加号/减号图标 */
summary::before {
content: '+'; /* 默认是加号 */
position: absolute;
right: 15px;
font-size: 1.2em;
line-height: 1;
transition: transform 0.2s ease;
}
details[open] summary::before {
content: '-'; /* 展开时变成减号 */
transform: rotate(0deg); /* 确保减号不旋转 */
}
details[open] summary {
border-bottom: none; /* 展开时底部边框可以去掉 */
}
details p {
padding: 10px 15px;
line-height: 1.6;
}通过这种方式，我们可以完全控制图标的样式和位置。
过渡效果： 遗憾的是，details 内部内容的高度变化，浏览器原生不支持平滑的 CSS transition。这是个常见的痛点。当你点击 summary 时，内容会立即展开或收起，没有动画效果。要实现平滑的展开/收起动画，通常需要 JavaScript 的介入。
JavaScript 增强：
JavaScript 的介入主要用于实现更复杂的交互逻辑或动画。
监听 toggle 事件： details 元素有一个 toggle 事件，当其状态从展开变为收起，或从收起变为展开时触发。这是我们执行额外逻辑的好时机。
document.querySelectorAll('details').forEach(detail => {
detail.addEventListener('toggle', event => {
if (detail.open) {
console.log('Details 已展开');
// 可以在这里加载动态内容，或者发送分析事件
} else {
console.log('Details 已收起');
}
});
});实现自定义动画： 由于原生 CSS 无法直接平滑过渡高度，我们可以通过 JS 来模拟。这通常涉及在 toggle 事件中获取内容的高度，然后通过 max-height 或 height 属性配合 CSS transition 来实现。这比纯 CSS 复杂得多，但能带来更好的用户体验。
// 这是一个简化版的动画思路，实际生产环境可能需要更健壮的实现
document.querySelectorAll('details').forEach(detail => {
const content = detail.querySelector('p'); // 假设内容在 p 标签里
if (!content) return; // 确保有内容
// 初始设置，隐藏溢出并设置高度为0
content.style.overflow = 'hidden';
content.style.transition = 'max-height 0.3s ease-out';
detail.addEventListener('toggle', () => {
if (detail.open) {
// 展开时，先获取实际高度，然后设置 max-height
content.style.maxHeight = content.scrollHeight + 'px';
} else {
// 收起时，先设置当前高度，然后动画到0
content.style.maxHeight = content.scrollHeight + 'px'; // 确保从当前高度开始
requestAnimationFrame(() => {
content.style.maxHeight = '0';
});
}
});
// 动画结束后清除 max-height，防止内容被截断
content.addEventListener('transitionend', () => {
if (detail.open) {
content.style.maxHeight = 'none'; // 动画结束后恢复，防止内容被截断
}
});
});这段JS代码只是一个思路，实际实现动画需要考虑更多细节，比如确保内容在动画结束后能够完全显示，以及处理好快速点击的情况。
手风琴效果（一次只展开一个）： 如果你想实现点击一个 summary 时，其他已展开的 details 自动收起，就需要 JavaScript 来控制 open 属性。
document.querySelectorAll('details').forEach(currentDetail => {
currentDetail.addEventListener('toggle', () => {
if (currentDetail.open) {
document.querySelectorAll('details').forEach(otherDetail => {
if (otherDetail !== currentDetail && otherDetail.open) {
otherDetail.open = false; // 关闭其他已展开的 details
}
});
}
});
});通过这些 CSS 和 JavaScript 的配合，details 和 summary 就能从一个基础组件，蜕变为一个功能更强大、视觉效果更佳的交互元素。
使用 details 和 summary 标签，虽然方便，但也有一些需要留心的地方，避免踩坑。
浏览器兼容性： 尽管现代浏览器对 details 和 summary 的支持已经非常普遍和良好（IE 浏览器是其主要短板，但现在使用率已大幅下降），但如果你需要支持一些老旧的浏览器版本，可能需要考虑使用 polyfill 或者提供一个基于 JavaScript 的回退方案。检查 caniuse.com 是个好习惯，它能告诉你这些标签在不同浏览器上的具体支持情况。
SEO 影响： 这是一个大家比较关心的问题。好消息是，搜索引擎（比如 Google）会抓取并索引 details 标签内部的所有内容，即使它们默认是折叠状态。这意味着你放在 details 里的内容不会被搜索引擎“忽略”，这对于 SEO 来说是个积极的信号。所以，不用担心把重要信息放在里面会导致排名下降。
无障碍性（Accessibility）的细微之处： details 和 summary 在原生层面提供了很好的无障碍支持，包括键盘导航（通过 Tab 键聚焦到 summary，然后按空格或回车键切换状态）和屏幕阅读器支持。但是，如果你通过 CSS 完全改变了 summary 的默认行为或移除了 ::marker 伪元素，并且没有用 ::before / ::after 伪元素或者其他方式来提供视觉提示，那么对于视力受损的用户来说，可能会失去一些上下文。确保你的自定义样式不会破坏原生的无障碍语义。例如，确保用户依然能清楚地知道这是一个可点击的、可展开/收起的区域。
动画的限制： 前面也提到了，details 元素内容的展开/收起默认是没有平滑动画的，内容会瞬间出现或消失。这是因为 height 从 0 到 auto 的过渡很难被浏览器平滑渲染。要实现平滑的展开/收起动画，通常需要 JavaScript 来动态计算内容高度，并配合 CSS 的 max-height 或 height 属性进行过渡。这会增加一些开发的复杂性。
嵌套使用： details 标签是可以嵌套的，也就是说，你可以在一个 details 里面再放另一个 details。这在某些层级结构比较复杂的信息展示中可能会用到。不过，过多的嵌套可能会让用户感到困惑，所以在使用时要考虑信息架构的清晰度。
summary 必须是 details 的第一个子元素： 这是 HTML 规范的要求。如果你把其他元素放在 summary 前面，或者 summary 不作为 details 的直接子元素，那么 details 的折叠功能可能不会按预期工作，或者在某些浏览器中表现异常。
总的来说，details 和 summary 是非常实用的 HTML 元素，尤其适合那些对交互动画要求不高，但又希望提供良好用户体验和无障碍性的场景。了解它们的特性和局限，能帮助我们更好地利用它们。
以上就是details和summary标签的作用是什么？折叠内容怎么实现？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
261
收藏
