首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

details

HTML <details> 元素被用作发现小部件,用户可以从其中检索附加信息。

内容类别

流内容,切片根,互动内容,可触及的内容。

允许的内容

一个<summary>元素,后跟流内容。

标记遗漏

没有,起始和结束标签都是强制性的。

允许父母

任何接受流内容的元素。

允许ARIA角色

没有

DOM界面

HTMLDetailsElement

属性

本元素支持 全局属性.

open 此布尔值属性指示是否在页面加载时向用户显示详情,默认值是false所以详情会被隐藏。

示例

代码语言:javascript
复制
<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>

运行结果

注意:如果上面的实况样本不适用于您,请参阅浏览器兼容性以确定您的浏览器是否支持该功能。

样式示例

按照最新的规范,Firefox会使摘要元素display:list-item,并且可以将样式标记为与样式列表项相同的样式。遵循较旧的规范,Chrome和Safari具有可以设置伪元素样式的规则:: - webkit-detail-marker

对于跨浏览器兼容样式,通过设置smmary{display:block}和Chrome以及Safari的标记设置:: webkit-details-marker {display:none;}来隐藏Firefox的标记。然后可以以适用于必要样式的方式应用样式。下面的示例使用CSS生成的内容来添加标记。

HTML

代码语言:javascript
复制
<details>
  <summary>Some details</summary> 
  <p>More info about the details.</p> 
</details>

CSS

代码语言:javascript
复制
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 StandardThe definition of '<details>' in that specification.

Living Standard

HTML 5.1The definition of '<details>' in that specification.

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

12

In Development

49.0 (49.0)

No support

15

6

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

4.0

In Development

49.0 (49.0)

No support

No support

6.1

扫码关注腾讯云开发者

领取腾讯云代金券