details标签常用于FAQ、折叠菜单、高级设置、代码片段展示等场景，实现按需展示信息；2. 可通过CSS自定义summary的指示器样式，并用JavaScript添加动画、手风琴效果或状态记忆；3. 其原生支持可访问性，但自定义时需保留状态提示、合理管理焦点并避免过度嵌套。

在HTML文档中，要展示可折叠的额外信息，最直接、语义化的方式就是使用

<details>

和

<summary>

标签。它们提供了一种原生支持的交互式内容展示机制，用户点击即可展开或收起，无需编写额外的JavaScript，极大地简化了这类交互的实现。

在HTML中，

<details>

标签是一个容器，用于包裹那些可以按需显示或隐藏的额外信息。而

<summary>

标签则是这些信息的标题或概要，它必须是

<details>

的第一个子元素。当用户点击

<summary>

时，

<details>

标签内部除了

<summary>

之外的内容就会在显示和隐藏之间切换。这就像是一个小小的手风琴组件，浏览器原生就提供了这种功能，省去了我们自己写JS来控制显示隐藏的麻烦。默认情况下，

<details>

是收起的，如果你想让它默认展开，可以给

<details>

标签添加一个

open

属性。

details

标签在实际开发中有哪些常见的应用场景？

老实说，一开始我看到

<details>

标签时，觉得它可能就是个小众玩意儿，但在实际项目中用起来，发现它真是个宝藏。它能解决不少我们平时用JS和CSS才能搞定的交互问题，而且语义化非常好，对SEO和可访问性都有天然的优势。

• FAQ（常见问题）列表： 这是最经典的用法了。每个问题作为

  <summary>

  ，答案放在

  <details>

  里面。用户可以根据需要展开某个问题的答案，而不是一次性看到所有冗长的文本。这样页面看起来清爽很多，用户体验也提升了。

• 折叠式菜单或侧边栏： 尤其是在移动端，屏幕空间宝贵。我们可以把一些次级导航项或者配置选项放在

  <details>

  里，点击主菜单项（

  <summary>

  ）就能展开子菜单。这比用JS控制

  display: none

  和

  display: block

  要优雅和语义化得多。

• 高级设置/选项： 想象一下一个表单，有很多高级选项并不是所有用户都会用到。把它们藏在

  <details>

  里，只显示一个“高级设置”的

  <summary>

  ，页面会简洁很多。只有需要调整的用户才会去点击展开。

• 显示/隐藏代码片段： 对于技术博客或者文档，我们经常需要展示代码。如果代码很长，直接贴出来会占用大量页面空间。用

  <details>

  包裹代码块，

  <summary>

  写上“查看代码”或者“点击展开”，既美观又实用。

• 逐步披露信息（Progressive Disclosure）： 当信息量大或者流程复杂时，一次性呈现所有内容会让用户感到 overwhelmed。通过

  <details>

  ，我们可以将信息分解成小块，用户根据自己的节奏逐一展开，有助于理解和消化。

• 产品特性或规格列表： 在电商网站，商品详情页经常有大量的产品规格。用

  <details>

  可以把这些信息分组，比如“基本参数”、“包装清单”、“售后服务”等，让页面更有条理。

这些场景其实都围绕着一个核心思想：按需展示，减少信息过载。

<details>

标签恰好能完美地实现这一点，而且是以一种浏览器原生支持、无需额外脚本的方式。

立即学习“前端免费学习笔记（深入）”；

如何使用CSS和JavaScript来增强

details

标签的功能和样式？

虽然

<details>

标签原生功能已经很强大，但我们作为开发者，总想让它更符合设计要求，或者实现一些更复杂的交互。这时候，CSS和JavaScript就派上用场了。

CSS增强：

原生

<details>

的展开/收起箭头可能不符合你的设计风格。别担心，CSS可以帮你定制。

/* 隐藏默认的展开/收起箭头 */ summary::-webkit-details-marker {     display: none; /* 针对WebKit浏览器 */ } summary::marker {     display: none; /* 标准写法 */ }  /* 自定义指示器，例如使用伪元素 */ summary {     list-style: none; /* 移除列表项样式，以防万一 */     cursor: pointer;     padding: 10px;     background-color: #f0f0f0;     border-bottom: 1px solid #ccc;     position: relative; /* 为伪元素定位 */     padding-left: 30px; /* 为自定义箭头留出空间 */ }  summary::before {     content: '+'; /* 默认显示加号 */     position: absolute;     left: 10px;     font-weight: bold;     transition: transform 0.2s ease; }  details[open] summary::before {     content: '-'; /* 展开时显示减号 */     /* 或者旋转箭头图标 */     /* transform: rotate(90deg); */ }  /* 样式化详情内容 */ details > div { /* 用一个div包裹详情内容会更好控制样式 */     padding: 15px;     border: 1px solid #eee;     border-top: none;     background-color: #fff; }

这里我们隐藏了浏览器默认的箭头，然后利用

::before

伪元素来自定义一个加号/减号作为指示器。当

<details>

处于

open

状态时，我们可以通过

details[open] summary::before

来改变伪元素的内容或样式，从而实现自定义的展开/收起图标。

AirOps

AirOps帮助业务团队使用正确的数据创建表、文档和工具

20

查看详情

JavaScript增强：

虽然

<details>

不需要JS就能工作，但JS可以帮助我们实现一些高级功能，比如动画、联动或者状态管理。

一个常见的需求是让内容展开时有平滑的动画效果。原生

<details>

在展开时是瞬间出现的，没有过渡动画。要实现动画，我们需要一些技巧，因为直接对

height

进行

transition

在内容高度不确定时会比较麻烦。一个常见的做法是监听

toggle

事件，然后通过JS来控制内部元素的动画。

document.querySelectorAll('details').forEach(details => {     details.addEventListener('toggle', () => {         if (details.open) {             // 展开时：可能需要计算内容高度并设置max-height进行过渡             const content = details.querySelector('.details-content'); // 假设详情内容在一个div.details-content里             if (content) {                 content.style.maxHeight = content.scrollHeight + 'px';                 content.style.opacity = 1;                 content.style.overflow = 'hidden'; // 避免内容溢出                 content.style.transition = 'max-height 0.3s ease-out, opacity 0.3s ease-out';             }         } else {             // 收起时：先设置max-height为0，再重置             const content = details.querySelector('.details-content');             if (content) {                 content.style.maxHeight = '0';                 content.style.opacity = 0;             }         }     }); });

这里有个小挑战：直接给

details

里的内容做

height

或

max-height

动画会有点棘手，因为浏览器对

height: auto

的过渡支持不好。通常我们会把详情内容包裹在一个

div

里，然后对这个

div

的

max-height

进行动画。当展开时，把

max-height

设置为内容实际的高度（

scrollHeight

）；收起时，设置为

0

。这需要一点JS来计算高度，但效果会好很多。

此外，你还可以用JS实现：

• 手风琴效果： 确保每次只有一个

  <details>

  是展开的。当一个

  <details>

  被打开时，关闭所有其他的

  <details>

  。

• 记住用户状态： 使用

  localStorage

  记住哪些

  <details>

  是打开的，下次访问时自动恢复。

• 与其他组件联动： 例如，点击某个按钮时，打开特定的

  <details>

  。

使用

details

标签时需要注意哪些可访问性（Accessibility）问题？

可访问性是前端开发中一个不容忽视的方面，而

<details>

和

<summary>

标签在这方面做得非常好，但我们仍需注意一些细节，以免破坏其原生的优势。

• 原生可访问性优势：

  <details>

  和

  <summary>

  标签本身就具有很好的语义化和可访问性。浏览器会为

  <summary>

  自动添加

  role="button"

  ，

  aria-expanded

  属性也会随着展开/收起状态自动切换，并且支持键盘导航（Tab键聚焦到

  <summary>

  ，Enter或空格键进行切换）。这意味着屏幕阅读器用户可以清晰地知道这是一个可折叠的区域，并能方便地进行操作。这是它比纯JS实现的折叠组件的一大优势。

• 自定义样式与指示器： 如果你像上面CSS示例那样，隐藏了浏览器默认的展开/收起指示器（那个小箭头），并用自定义的图标或文本来替代，那么务必确保你的自定义指示器也清晰地传达了当前的状态。例如，展开时显示“减号”或向下的箭头，收起时显示“加号”或向右的箭头。如果指示器只是纯粹的装饰，没有语义上的变化，那么屏幕阅读器用户可能无法判断当前区域是展开还是收起。
• 焦点管理： 确保当

  <details>

  内容展开时，如果内部有可交互元素（如表单字段、链接），焦点可以自然地移动到这些元素上，或者用户可以方便地通过Tab键导航到它们。通常，浏览器会处理好

  <summary>

  的焦点，但如果你的内部内容很复杂，可能需要额外的JS来微调焦点流。

• 内容结构：

  <details>

  内部的内容应该保持良好的语义结构，例如使用标题、段落、列表等。不要把所有内容都堆在一个没有语义的

  div

  里。这有助于屏幕阅读器更好地理解和朗读内容。

• 避免嵌套过多： 虽然技术上可以嵌套

  <details>

  标签，但过多的嵌套可能会让用户，特别是使用辅助技术的用户，感到困惑和难以导航。尽量保持层级扁平，或者只进行少量嵌套。

总的来说，

<details>

标签在可访问性方面是一个非常好的选择，它减少了我们手动管理ARIA属性和键盘交互的工作量。只要我们在进行自定义样式时小心谨慎，不破坏其原生的语义和交互，就能为所有用户提供一个良好的体验。