HTML <details> 标签

<details>标签是在 HTML5 中新增元素，允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和 jQuery 手风琴插件差不多。

实例

<!DOCTYPE html>
<html>
<body>
<h1>details 元素</h1>
<details>
  <summary>未来世界</summary>
  <p>Epcot(未来世界)，是沃尔特迪斯尼世界度假区的一个主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的焰火和季节性特别活动。</p>
</details>
</body>
</html>

运行一下

浏览器支持

元素
<details>	12.0	79.0	49.0	6.0	15.0

定义和用法

<details> 标签用于描述文档或文档某个部分的细节。

HTML 4.01 与 HTML 5 之间的差异

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

提示和注释

提示：与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

属性

HTML5 中的新属性。

属性	值	描述
open	open	定义 details 是否可见。

全局属性

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

事件属性

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

更多实例

<!DOCTYPE html>
<html>
<head>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
</head>
<body>
<h1>details 与 summary 元素 + CSS样式</h1>
<details>
  <summary>未来世界</summary>
  <p>Epcot(未来世界)，是沃尔特迪斯尼世界度假区的一个主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的焰火和季节性特别活动。</p>
</details>
</body>
</html>