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

结果

规范

浏览器兼容性

参阅

• <summary>