HTML Disclosure Summary element
(
<summary>
) element specifies a summary, caption, or legend for a
<details>
element's disclosure box.
点击
<summary>
element toggles the state of the parent
<details>
element open and closed.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| 准许内容 | 措词内容 or one element of Heading content |
|---|---|
| Tag omission | None, both the start tag and the end tag are mandatory. |
| Permitted parents |
<details>
元素。
|
| Implicit ARIA role |
button
|
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLElement
|
此元素只包括 全局属性 .
<summary>
element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.
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>
element's first child is not a
<summary>
element, the
用户代理
will use a default string (typically "Details") as the label for the disclosure box.
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.
You can also change the style to
display: block
to remove the disclosure triangle.
见 浏览器兼容性 section for details, as not all browsers support full functionality of this element yet.
Below are some examples showing
<summary>
in use. You can find more examples in the documentation for the
<details>
元素。
A simple example showing the use of
<summary>
在
<details>
元素：
<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>
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>
This currently has some spacing issues that could be addressed using CSS.
警告：
由于
<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.
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>
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<summary>' in that specification. |
实时标准 | |
|
HTML 5.1
The definition of '<summary>' in that specification. |
推荐 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
summary
|
Chrome 完整支持 12 | Edge 完整支持 79 | Firefox 完整支持 49 | IE 不支持 No | Opera 完整支持 15 | Safari 完整支持 6 | WebView Android 完整支持 4 | Chrome Android 完整支持 Yes | Firefox Android 完整支持 49 | Opera Android 完整支持 14 | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
display: list-item
|
Chrome
不支持
No
注意事项
|
Edge
不支持
No
注意事项
|
Firefox 完整支持 49 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No |
Chrome Android
不支持
No
注意事项
|
Firefox Android 完整支持 49 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
见实现注意事项。