details

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

属性

本元素支持 全局属性.

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';
}

运行结果

规范

浏览器兼容性