HTML <details> 元素

HTML <details> 元素被用作一个可打开的小部件，用户可以从其中查阅附加信息。

使用 <details> 隐藏任务运行详情

<section class="progress window">
  <h1>您的提交任务正在运行中。</h1>
  <details>
    <summary>任务正在运行中... 25%</summary>
    <dl>
      <dt>已完成:</dt>
      <dd>10个</dd>
      <dt>耗时:</dt>
      <dd>01:16:27</dd>
      <dt>总共:</dt>
      <dd>40个</dd>
    </dl>
  </details>
</section>

尝试一下 »

注意： 如果上述实例无效，请参阅桌面浏览器兼容性或移动浏览器兼容性来确定浏览器是否支持该功能。

特性

内容类别	流式内容，章节根节点，交互内容，可触知内容.
允许的内容	后面跟着流式内容的一个 <summary> 元素。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受流式内容的元素。
允许的 ARIA 角色	无
DOM 接口	HTMLDetailsElement

属性

该元素包含了全局属性。

open

该布尔属性表示是否在页面加载时向用户显示详细信息。默认是 false ，所以详细信息将被隐藏。

更多实例

对比默认关闭和打开的详情

<details>
  <summary>一些细节</summary>
  <p>更多关于细节的信息。</p>
</details>

<details open>
  <summary>更多细节</summary>
  <p>这里是关于细节的更详细的信息。</p>
</details>

尝试一下 »

加上样式

按照最新的规范，Firefox 将 summary 元素设置为 display：list-item，其中的标记也可以象列表项一样来设置样式。按照较旧的规范，Chrome 和 Safari 可以通过 ::-webkit-details-marker 伪元素来设置样式。

要隐藏 summary 的标记，在 Firefox 中，可以设置 summary { display: block }，在 Chrome 和 Safari 中，可以设置 ::-webkit-details-marker {display: none;}。下面的实例使用 CSS 生成的内容来自定义标记。

<style>
  summary {
    display: block;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary::before {
    content: '\25B6';
    padding-right: 0.5em;
    color: grey;
  }

  details[open] > summary::before {
    content: '\25BC';
    color: grey;
  }
</style>

<details>
  <summary>一些细节</summary>
  <p>更多关于细节的信息。</p>
</details>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard <details> 的定义	现行的标准	-
HTML 5.1 <details> 的定义	推荐	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. 开发中。

2. 在 Firefox 57 之前，有一个 bug 是如果 <details> 元素有激活的 CSS 动画，，那么使用 open 属性是不能将其设置为默认打开的。

3. 有一个 bug 是如果 <detail> 元素有激活的 CSS 动画，那么使用 open 属性是不能将其设置为默认打开的。

相关链接

• <summary>