We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

 

定义和用法

HTML <details>元素被用来创建一个展示的部件,只有在当部件被切换成“open”状态时显示可见信息。HTML<summary>元素被用来提供该部件的一个概要或者标签。

一个公开的小部件通常用一个小三角形呈现在屏幕上,通过旋转(或者扭动)的动作来表示?翻转部件打开或者关闭,并在三角形旁边加上一个标签。如果<details>元素的第一个子元素是<summary>,<summary>元素的内容被用来做公开部件的标签。

一个<details>组件只能在两种状态之一。三角形部件自己默认状态(closed)只显示标签字符串,同指定使用<summary>一样。如下面内容所示:

Screenshot of closed <details> widget.

这里我们看到一个标签为“System Requirements”的标准展示部件,它默认是closed状态。当用户点击部件或者它的标签时,它“扭转”打开,展现它的内容,像下面这样:

Screenshot of open <details> widget.

 

这里你可以使用css来明显地改变展示组件的外观,并且你可以通过编程的方式来设置组件的属性值打开或者关闭部件。

当部件处于closed状态,在默认情况下元素的宽和高仅仅只足够包含展示组件的三角形和展示标题(<summary>标签内容)。当部件open状态时,元素会扩大到足够的空间来展示所包含的详细信息。

 

所属分类 Flow content, sectioning root, interactive content, palpable content.
允许内容 One <summary> element followed by flow content.
标签闭合 不允许,开始标签和结束标签都不能省略。
允许的父级元素 Any element that accepts flow content.
DOM接口 HTMLDetailsElement

属性

本元素支持 全局属性.

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>

在线演示

提示: 如果本在线演示在您的浏览器内没有效果,参阅 Browser compatibility来确认您的浏览器是否支持使用本标签。

样式示例

按照最新的规范,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';
}

结果

规范

Specification Status Comment
HTML Living Standard
<details>
Living Standard  
HTML 5.1
<details>
Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 12 未实现 bug 591737 未实现 15 6
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 未实现 bug 591737 未实现 未实现 未实现

参阅

文档标签和贡献者

此页面的贡献者: moquede, Jiang-Xuan, whimsy, xgqfrms-GitHub, Martin.Chow
最后编辑者: moquede,