details

<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