详情和摘要

探索非常有用的详细信息和摘要元素的运作方式，以及在何处 使用它们。

披露声明微件是一种用于隐藏和显示内容的界面控件。如果您正在 web.dev 上阅读此内容， 视口宽度小于 106em，点击“在此页面上”此段落上方会显示 部分。如果看不到该菜单，请缩小浏览器，以便以浏览方式查看本页中的目录导航 披露声明微件。

手风琴式折叠图形界面是一系列垂直堆叠的 披露声明微件。手风琴用户界面的一个常见用例是许多网站上的常见问题解答 (FAQ) 页面。 手风琴式常见问题解答包含一系列可见问题；点击相应问题即可展开（即“揭示”）该问题的答案。

至少从 2009 年开始，jQuery 就添加了手风琴式界面模式。原始版本，无 JavaScript 手风琴式解决方案解决方案包括：将每个常见问题解答问题设为 <label>，后跟标记的对勾标记，然后显示 <div> 回答。CSS 如下所示：

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

为什么会见到历史？不含 JavaScript 或表单控制黑客行为的披露微件（例如手风琴）是相对较新的 添加；<details>和<summary> 自 2020 年 1 月起，才在所有现代浏览器中才获得完全支持。现在，您可以创建正常运行了， 而不只是使用语义 HTML 的醒目披露声明 widget。您只需要 <details> 和 <summary> 元素即可：它们是用于处理 展开和收起内容当用户点击或点按 <summary>，或在以下情况下释放 Enter 键时 <summary> 获得焦点，父级 <details> 切换开关的内容可见！

与所有语义内容一样，您可以逐步增强默认功能和外观。在此示例中，有一点 已添加 CSS，但没有添加任何其他内容：

您会注意到，这些 Codepen 不包含任何 JavaScript。

切换可见性：open 属性

<details> 元素是披露声明 widget 容器。<summary> 是其父级 <details> 的摘要或图例。通过 summary 始终显示，用作切换父内容其余内容的显示按钮。互动 如果使用 <summary>，则通过切换 <details>元素的 open 属性。

open 属性是一个布尔值属性。如果存在，无论其值如何，无论该值如何，它都表示所有 <details> 向用户显示的内容如果 open 属性不存在，则只显示 <summary> 的内容。

由于系统会在用户与控件互动时自动添加和移除 open 属性，因此该属性可以在 CSS 中使用 根据元素的状态为其设置不同的样式。

您可以创建手风琴式折叠，其中包含多个 <details> 元素，每个元素都有一个 <summary> 子元素。省略 open 属性 表示 <details> 将全部收起或关闭，并且在网页加载时仅显示摘要标题； 每个标题都是父 <details> 中其余内容的开头。如果您在 HTML 中添加 open 属性，则 <details> 会在网页加载时展开并显示其内容。

处于收起状态的隐藏内容在某些浏览器中是可搜索的，而在另一些浏览器中则是无法搜索到的，即使处于收起状态的内容也是如此 不是 DOM 的一部分。如果您在 Edge 或 Chrome 中进行搜索，系统会展开包含搜索字词的详细信息 出现的问题。Firefox 或 Safari 不会复制此行为。

<summary> 必须是 <details> 元素的第一个子元素，表示其余元素的摘要、图片说明或图例 嵌套该元素的父 <details> 元素的内容。<summary> 元素的内容可以是任何标题 内容、纯文本或 HTML，都可以在段落内使用。

切换摘要标记

在前面的两个 Codepen 中，您会注意到箭头指向 inline-start 显示在摘要中披露微件通常使用可旋转（或扭转）的小三角形显示在屏幕上。 使用三角形旁边的标签来指示营业/停业状态。<summary> 元素的内容会标记披露 widget。 每个部分顶部的旋转箭头是一个::marker设置在 <summary> 元素。与列表项一样，<summary> 元素支持 list-style 简写属性及其长手属性，包括 list-style-type。 您可以使用 CSS 设置披露三角形的样式，包括将使用的标记从三角形更改为任何其他项目符号类型，包括 使用 list-style-image 生成图片。

如需应用其他样式，请使用类似于 details summary::marker 的选择器。通过 ::marker 伪元素仅接受有限数量的样式。移除 ::marker 并将其替换为更易风格的 ::before， 常见做法，CSS 样式会根据所生成内容的存在（或不存在）略微更改所生成内容的样式 属性。您可以通过设置 list-style: none 移除披露微件图标，也可以设置内容 以 none 为准，但务必添加视觉指示符，以告知视力正常的用户摘要内容是一个切换开关 按钮。

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

此示例移除了默认标记，并添加生成的内容，以便在详情关闭和 - 时创建 +。 打开详细信息时

如果您希望详细信息块默认处于打开状态，请在起始 <details> 标记中添加 open 属性。您还可以添加空间 并转换使用生成内容创建的标记的旋转角度，以改善外观：

错误的处理方式

如果您未添加 <summary>，浏览器将为您创建一个：使用标记和“details”一词。此摘要 属于影子根，因此不会应用作者 CSS 摘要样式。遗憾的是，Safari 并不支持 键盘焦点顺序中的详细信息。

如果您添加了 <summary>，但它不是 <details> 中的第一个元素，浏览器仍会显示摘要 正常。同样，如果您在摘要中添加了链接、标签或其他互动元素， 以不同的方式处理互动内容中的互动内容。例如，如果您在摘要中添加了链接，某些浏览器 会同时将摘要和链接添加到默认 Tab 键导航顺序中，但默认情况下其他浏览器不会重点关注该链接。 如果您点击嵌套在 <summary> 中的 <label>，某些浏览器会将焦点放在关联的表单控件上；其他浏览器 会将焦点置于表单控件上，并将 <details> 切换为开启或关闭。

HTMLDetailsElement 接口

与所有 HTML 元素一样，HTMLDetailsElement 继承所有 来自 HTMLElement 的属性、方法和事件，并将 open 实例属性和 toggle 事件。HTMLDetailsElement.open 属性是一个布尔值 反映 open HTML 属性的值，用于表示 是否向用户显示相应元素的内容（不计算 <summary>）。触发切换事件 当 <details> 元素打开或关闭时触发。您可以使用 addEventListener() 监听此事件。

如果您想编写一个脚本，以在用户打开任何其他详细信息时关闭已打开的详细信息，请移除“打开”属性 使用 removeAttribute("open")：

这是唯一一个使用 JavaScript 的示例。除了关闭其他 打开披露声明 widget。

请注意，<details> 和 <summary> 可以具有丰富的样式，甚至可以用于创建工具提示。 但是，如果您要在原生语义不匹配的用例中使用这些语义元素，请始终确保保持可访问性。 默认情况下，HTML 在大多数情况下是可访问的。作为开发者，我们的职责是确保我们提供的内容随时可供访问。

检查您的理解情况

测试您对详细信息和总结知识的掌握情况。