details
HTML <details> 元素被用作发现小部件，用户可以从其中检索附加信息。
内容类别 | 流内容，切片根，互动内容，可触及的内容。 |
|---|---|
允许的内容 | 一个<summary>元素，后跟流内容。 |
标记遗漏 | 没有，起始和结束标签都是强制性的。 |
允许父母 | 任何接受流内容的元素。 |
允许ARIA角色 | 没有 |
DOM界面 | HTMLDetailsElement |
属性
本元素支持 全局属性.
open 此布尔值属性指示是否在页面加载时向用户显示详情，默认值是false所以详情会被隐藏。
示例
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
<details open>
<summary>Even more details</summary>
<p>Here are even more details about the details.</p>
</details>运行结果
注意：如果上面的实况样本不适用于您，请参阅浏览器兼容性以确定您的浏览器是否支持该功能。
样式示例
按照最新的规范，Firefox会使摘要元素display：list-item，并且可以将样式标记为与样式列表项相同的样式。遵循较旧的规范，Chrome和Safari具有可以设置伪元素样式的规则:: - webkit-detail-marker
对于跨浏览器兼容样式，通过设置smmary{display：block}和Chrome以及Safari的标记设置:: webkit-details-marker {display：none;}来隐藏Firefox的标记。然后可以以适用于必要样式的方式应用样式。下面的示例使用CSS生成的内容来添加标记。
HTML
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>CSS
summary {
display: block;
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: '\25B6';
padding-right: 0.5em;
}
details[open] > summary::before {
content: '\25BC';
}运行结果
规范
Specification | Status | Comment |
|---|---|---|
HTML Living StandardThe definition of '<details>' in that specification. | Living Standard | |
HTML 5.1The definition of '<details>' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 12 | In Development | 49.0 (49.0) | No support | 15 | 6 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | 4.0 | In Development | 49.0 (49.0) | No support | No support | 6.1 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
