HTML Details Element (
<details>
)
creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
A summary or label can be provided using the
<summary>
元素。
A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. If the first child of the
<details>
element is a
<summary>
, the contents of the
<summary>
element are used as the label for the disclosure widget.
注意： The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties."
A
<details>
widget can be in one of two states. The default
closed
state displays only the triangle and the label inside
<summary>
(or a
用户代理
-defined default string if no
<summary>
). This might look like the following:
Here we see a standard disclosure widget with the label "System Requirements", in its default closed state. When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents:
From there, you can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its
open
属性。
By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.
注意： Unfortunately, at this time there's no built-in way to animate the transition between open and closed.
Fully standards-compliant implementations automatically apply the CSS
到
display
: list-item
<summary>
element. You can use this to customize its appearance further. See
Customizing the disclosure widget
进一步了解细节。
| 内容类别 | 流内容 , sectioning root, interactive content, palpable content. |
|---|---|
| 准许内容 |
One
<summary>
element followed by
flow content
.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts flow content . |
| Implicit ARIA role |
group
|
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLDetailsElement
|
此元素包括 全局属性 .
open
<details>
element — are currently visible. The default,
false
, means the details are not visible.
In addition to the usual events supported by HTML elements, the
<details>
element supports the
toggle
event, which is dispatched to the
<details>
element whenever its state changes between open and closed. It is sent
after
the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.
You can use an event listener for the
toggle
event to detect when the widget changes state:
details.addEventListener("toggle", event => {
if (details.open) {
/* the element was toggled open */
} else {
/* the element was toggled closed */
}
});
This example shows a
<details>
element with no provided summary.
<details> <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>
In this situation, the browser will use a default summary string (usually "Details"). Here's what your browser does with it:
This example adds a summary to the above example by using the
<summary>
element inside
<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>
The result from this HTML is this:
To start the
<details>
box in its open state, add the Boolean
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>
This results in:
Now let's apply some CSS to customize the appearance of the disclosure box.
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.
<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>
The disclosure triangle itself can be customized, although this is not as broadly supported. There are variations in how browsers support this customization due to experimental implementations as the element was standardized, so we'll have to use multiple approaches for a while.
<summary>
element supports the
list-style
shorthand property and its longhand properties, such as
list-style-type
, to change the disclosure triangle to whatever you choose (usually with
list-style-image
). For example, we can remove the disclosure widget icon by setting
list-style: none
.
Chrome doesn't support this yet, however, so we also need to use its non-standard
::-webkit-details-marker
pseudo-element
to customize the appearance in that browser.
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
This CSS creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents.
<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>
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<details>' in that specification. |
实时标准 | |
|
HTML 5.1
The definition of '<details>' in that specification. |
推荐 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
details
|
Chrome 完整支持 12 | Edge 完整支持 79 |
Firefox
完整支持
49
注意事项
|
IE 不支持 No | Opera 完整支持 15 | Safari 完整支持 6 | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes |
Firefox Android
完整支持
49
注意事项
|
Opera Android 完整支持 14 | Safari iOS 完整支持 6.1 | Samsung Internet Android 完整支持 Yes |
open
|
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 完整支持 6.1 | Samsung Internet Android 完整支持 Yes |
完整支持
不支持
见实现注意事项。