<summary>: The Disclosure Summary element

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

¥Usage notes

<summary> 元素的内容可以是可在段落中使用的任何标题内容、纯文本或 HTML。

¥The <summary> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.

<summary> 元素只能用作 <details> 元素的第一个子元素。当用户单击摘要时，父 <details> 元素会切换为打开或关闭，然后 toggle 事件会发送到 <details> 元素，该事件可用于让你知道何时发生此状态更改。

¥A <summary> element may only be used as the first child of a <details> element. When the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.

<details> 的内容为 <summary> 提供了 accessible description。

¥The content of the <details> provides the accessible description for the <summary>.

¥Default label text

如果 <details> 元素的第一个子元素不是 <summary> 元素，则 user agent 将使用默认字符串（通常为 "细节"）作为显示框的标签。

¥If a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

¥Default style

根据 HTML 规范，<summary> 元素的默认样式包括 display: list-item。这使得可以更改或删除默认显示为标签旁边的公开小部件的图标（通常是三角形）。

¥Per the HTML specification, the default style for <summary> elements includes display: list-item. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.

你还可以将样式更改为 display: block 以删除显示三角形。

¥You can also change the style to display: block to remove the disclosure triangle.

有关详细信息，请参阅 浏览器兼容性 部分，因为并非所有浏览器都支持此元素的完整功能。

¥See the Browser compatibility section for details, as not all browsers support full functionality of this element yet.

对于基于 Webkit 的浏览器，例如 Safari，可以通过非标准 CSS 伪元素 ::-webkit-details-marker 来控制图标显示。要删除显示三角形，请使用 summary::-webkit-details-marker { display: none }。

¥For Webkit-based browsers, such as Safari, it is possible to control the icon display through the non-standard CSS pseudo-element ::-webkit-details-marker. To remove the disclosure triangle, use summary::-webkit-details-marker { display: none }.

¥Examples

下面是一些使用 <summary> 的示例。你可以在 <details> 元素的文档中找到更多示例。

¥Below are some examples showing <summary> in use. You can find more examples in the documentation for the <details> element.

¥Basic example

一个简单的示例显示了 <summary> 在 <details> 元素中的使用：

¥A simple example showing the use of <summary> in a <details> element:

<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

结果

¥Result

¥Summaries as headings

你可以在 <summary> 中使用标题元素，如下所示：

¥You can use heading elements in <summary>, like this:

<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

结果

¥Result

目前存在一些可以使用 CSS 解决的间距问题。

¥This currently has some spacing issues that could be addressed using CSS.

警告：由于 <summary> 元素具有默认角色 button（它从子元素中删除所有角色），因此此示例不适用于屏幕阅读器等辅助技术的用户。<h4> 的角色将被删除，因此不会被视为这些用户的标题。

¥Warning: Because the <summary> element has a default role of button (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The <h4> will have its role removed and thus will not be treated as a heading for these users.

¥HTML in summaries

此示例向 <summary> 元素添加一些语义以指示标签重要：

¥This example adds some semantics to the <summary> element to indicate the label as important:

<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

结果

¥Result

¥Technical summary

¥See also

• <details>