<details>

版本：HTML5

HTML<details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary>元素可为该部件提供概要或者标签。

浏览器支持

目前，只有 Chrome 和 Safari 6 支持<details>标签。

示例

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
<style>
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

</style>

标签定义及使用说明

• <details>标签规定了用户可见的或者隐藏的需求的补充细节。<details>标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在<details>标签里边。
• <details>元素的内容对用户是不可见的，除非设置了open属性。与<summary>标签配合使用可以为<details>定义标题。标题是可见的，用户点击标题时，会显示出<details>。

属性

此元素仅包含全局属性。

此布尔值属性指示详细信息（即<details>元素的内容）当前是否可见。默认值为false,表示细节不可见。

事件

除了HTML元素支持的常见事件之外，该<details>元素还支持toggle事件，<details>只要事件的状态在打开和关闭之间发生变化，该事件就会分派给该元素。它是在状态更改后发送的，尽管如果状态在浏览器可以分派事件之前多次更改，事件会合并在一起，因此只发送一个。

您可以侦听toggle事件以检测小部件何时更改状态：

details.addeventlistener("toggle", event => {
  if (details.open) {
    /* the element was toggled open */
  }
 else {
    /* the element was toggled closed */
  }
}
);

HTML 4.01 与 HTML 5 之间的差异

<details>标签是 HTML 5 中的新标签。

全局属性

<details>标签支持HTML 的全局属性。

事件属性

<details>标签支持HTML 的事件属性。

实例

使用<details>元素：

<details>
<summary>copyright 1999-2011.</summary>
<p>- by refsnes data. all rights reserved.</p>
<p>all content and graphics on this web site are the property of the company refsnes data.</p>
</details>

例子

本示例显示了一个<details>没有提供摘要的元素。

<details>
  <p>requires a computer running an operating system. the computer
  must have some memory and ideally some kind of long-term storage.
  an input device as well as some form of output device is
  recommended.</p>
</details>

本示例通过使用<summary>inside元素向上述示例添加摘要<details>，如下所示：

<details>
  <summary>system requirements</summary>
  <p>requires a computer running an operating system. the computer
  must have some memory and ideally some kind of long-term storage.
  an input device as well as some form of output device is
  recommended.</p>
</details>

要<details>以打开状态启动该框，请添加Boolean open属性：

<details open>
  <summary>system requirements</summary>
  <p>requires a computer running an operating system. the computer
  must have some memory and ideally some kind of long-term storage.
  an input device as well as some form of output device is
  recommended.</p>
</details>

应用一些CSS来定制显示框的外观。

//CSS


details {
  font: 16px "open sans", "arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}


//HTM

<details>
  <summary>system requirements</summary>
  <p>requires a computer running an operating system. the computer
  must have some memory and ideally some kind of long-term storage.
  an input device as well as some form of output device is
  recommended.</p>
</details>

自定义自带部件的样式

自带的三角形可以自定义，但并没有得到广泛支持。由于该元素是标准化的，因此在实验性实施阶段，浏览器如何支持此自定义项有所不同，我们不得不暂时使用多种方法。

<summary>元素支持list-style缩写属性或者完全属性，比如list-style-type，可以使用它们任意改变三角（通常是使用list-style-image）。例如，我们可以使用list-style: none移除三角形。

Chrome尚不支持此功能，因此我们还需要使用其非标准::-webkit-details-marker伪元素来自定义。

details {
  font: 16px "open sans", "arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  list-style: none;
}

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

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

<details>
  <summary>system requirements</summary>
  <p>requires a computer running an operating system. the computer
  must have some memory and ideally some kind of long-term storage.
  an input device as well as some form of output device is
  recommended.</p>
</details>