MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

 

HTML <details> 元素被用作发现小部件,用户可以从其中检索附加信息。

 

所属分类 Flow content, sectioning root, interactive content, palpable content.
允许内容 One <summary> element followed by flow content.
标签闭合 不允许,开始标签和结束标签都不能省略。
允许的父级元素 Any element that accepts flow content.
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>

在线演示

提示: 如果本在线演示在您的浏览器内没有效果,参阅 Browser compatibility来确认您的浏览器是否支持使用本标签。

样式示例

按照最新的规范,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 Standard
<details>
Living Standard  
HTML 5.1
<details>
Recommendation  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 12 未实现 bug 591737 未实现 15 6
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 未实现 bug 591737 未实现 未实现 未实现

参阅

文档标签和贡献者

 此页面的贡献者: whimsy, xgqfrms-GitHub, Martin.Chow
 最后编辑者: whimsy,