版本：HTML5

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

浏览器支持

示例

 Details
    Something small enough to escape casual notice.


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

标签定义及使用说明

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

属性

此元素仅包含全局属性。

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

事件

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

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

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

HTML 4.01 与 HTML 5 之间的差异

标签是 HTML 5 中的新标签。

全局属性

标签支持HTML 的全局属性。

事件属性

标签支持HTML 的事件属性。

实例

使用元素：

copyright 1999-2011.
- by refsnes data. all rights reserved.
all content and graphics on this web site are the property of the company refsnes data.

例子

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

 
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.

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

 system requirements 
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.

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

 system requirements 
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.

应用一些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


  system requirements 
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.

自定义自带部件的样式

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

元素支持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;
}


  system requirements 
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.

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com