<details>：详情披露元素
Baseline 广泛可用 *
<details> HTML 元素创建一个详情披露小部件，其中的信息仅在该小部件切换到打开状态时才可见。必须使用 <summary> 元素提供摘要或标签。
详情披露小部件通常在屏幕上以一个小三角形呈现，该三角形旋转（或扭转）以指示打开/关闭状态，旁边有一个标签。<summary> 元素的内容用作详情披露小部件的标签。<details> 的内容为 <summary> 提供可访问描述。
试一试
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
details {
border: 1px solid #aaaaaa;
border-radius: 4px;
padding: 0.5em 0.5em 0;
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
}
details[open] {
padding: 0.5em;
}
details[open] summary {
border-bottom: 1px solid #aaaaaa;
margin-bottom: 0.5em;
}
<details> 小部件可以处于两种状态之一。默认的关闭状态只显示三角形和 <summary> 中的标签（如果没有 <summary>，则显示用户代理定义的默认字符串）。
当用户单击小部件或将其聚焦然后按下空格键时，它会“扭转”打开，显示其内容。通常使用旋转或扭转的三角形来表示打开或关闭小部件，这就是为什么它们有时被称为“扭转器”的原因。
你可以使用 CSS 为详情披露小部件设置样式，并且可以通过设置/删除其 open 属性来以编程方式打开和关闭小部件。不幸的是，目前没有内置的方法来动画化打开和关闭之间的过渡。
默认情况下，当关闭时，小部件的高度仅足以显示详情披露三角形和摘要。当打开时，它会展开以显示其中包含的详细信息。
完全符合标准的实现会自动将 CSS display: list-item<summary> 元素。你可以使用此或 ::marker 伪元素来自定义详情披露小部件。
属性
此元素包含全局属性。
open-
此布尔属性指示详细信息（即
<details>元素的内容）当前是否可见。当此属性存在时，详细信息可见；当此属性不存在时，详细信息隐藏。默认情况下，此属性不存在，这意味着详细信息不可见。注意：你必须完全删除此属性才能隐藏详细信息。
open="false"会使详细信息可见，因为此属性是布尔值。 name-
此属性允许连接多个
<details>元素，一次只打开一个。这使得开发人员无需脚本即可轻松创建手风琴等 UI 功能。name属性指定一个组名称——给多个<details>元素相同的name值以将它们分组。同一组中只能有一个<details>元素可以打开——打开一个会导致另一个关闭。如果多个分组的<details>元素被赋予open属性，则只有源代码顺序中的第一个元素将被渲染为打开状态。注意：
<details>元素不必在源代码中彼此相邻才能成为同一组的一部分。
事件
除了 HTML 元素支持的常规事件外，<details> 元素还支持 toggle 事件，每当其状态在打开和关闭之间切换时，此事件就会分派给 <details> 元素。它在状态更改之后发送，但是如果浏览器在分派事件之前状态更改多次，则事件会合并，因此只发送一个。
你可以使用 toggle 事件的事件监听器来检测小部件何时更改状态
details.addEventListener("toggle", (event) => {
if (details.open) {
/* the element was toggled open */
} else {
/* the element was toggled closed */
}
});
示例
一个基本的详情披露示例
此示例显示了一个带有 <summary> 的基本 <details> 元素。
<details>
<summary>System Requirements</summary>
<p>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
</p>
</details>
结果
创建开放的详情披露框
要使 <details> 框以其打开状态启动，请添加布尔 open 属性
<details open>
<summary>System Requirements</summary>
<p>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
</p>
</details>
结果
多个命名详情披露框
我们包含几个 <details> 框，它们都具有相同的名称，因此一次只能打开一个
<details name="requirements">
<summary>Graduation Requirements</summary>
<p>
Requires 40 credits, including a passing grade in health, geography,
history, economics, and wood shop.
</p>
</details>
<details name="requirements">
<summary>System Requirements</summary>
<p>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
</p>
</details>
<details name="requirements">
<summary>Job Requirements</summary>
<p>
Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,
privacy, security, and internationalization, as well as a dislike of
broccoli.
</p>
</details>
结果
尝试打开所有详情披露小部件。当你打开一个时，所有其他小部件会自动关闭。
自定义外观
现在让我们应用一些 CSS 来自定义详情披露框的外观。
CSS
details {
font:
16px "Open Sans",
"Calibri",
sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #dddddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #dddddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details:open > summary {
background-color: #ccccff;
}
此 CSS 创建了一个类似于选项卡式界面的外观，单击选项卡会将其打开以显示其内容。
注意：在不支持 :open 伪类的浏览器中，你可以使用属性选择器 details[open] 在 <details> 元素处于打开状态时对其进行样式设置。
HTML
<details>
<summary>System Requirements</summary>
<p>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
</p>
</details>
结果
请参阅 <summary> 页面，了解自定义详情披露小部件的示例。
技术摘要
规范
| 规范 |
|---|
| HTML # the-details-element |
浏览器兼容性
加载中…