HTML标签之 <details> 与 <summary>

逃离我推掉我的手 2022-11-13 01:58 106阅读 0赞

众所周知， **HTML5** 已经出了很多年，其迭代版本都出到了 **HTML5.3** 。这其中有趣的 API 跟 标签有许多，这里就简单介绍两个：`<details>` 跟 `<summary>` 。

## 定义 ##

`<details>` 就是一个展示附加内容的原生组件。

而 `<summary>` 则是承载 `<details>` 附加内容的标签。

## demo ##

具体表现是这样：

![38c46a378d37be9ca3fff3171bcda958.gif][]

代码如下：

<h1>Copying "Really Achieving Your Childhood Dreams"</h1>
    <details>
      <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
      <dl>
        <dt>Transfer rate:</dt> <dd>452KB/s</dd>
        <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
        <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
        <dt>Duration:</dt> <dd>01:16:27</dd>
        <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
        <dt>Dimensions:</dt> <dd>320×240</dd>
      </dl>
    </details>

我们可以通过给 `<details>` 添加 **open** 属性来控制默认状态，例如：

![f77ab869b91048d97a2a1d14a9bcebec.png][]

代码如下：

<details open>
      ...
    </details>

## JS 控制 ##

我们可以通过 **toggle** 事件来进行控制，例子如下：

![7c7fe8dc17cf4d41b204f59213d94a44.gif][]

代码如下：

details.addEventListener("toggle", event => {
     h1.innerText = details.open ? 'opened status' : 'closed status';
    });

## 体验优化 ##

众所周知，原生标签的样式一般都比较丑，而且还不统一（所以一般没什么人用）。

不过还好，上述两个标签的基本样式的都是可以改的。

效果如下：

![f886d1ed43cc6104d350eb3e7dc6baea.gif][]

体验地址如下：

https://codepen.io/krischan77/pen/Rwomgzp

代码如下：

配合简单的过渡跟选择器，就能够轻松实现折叠菜单功能，非常方便。

## 兼容性 ##

![4653ee5bd8bf2300f16ebe020697da40.png][]

还行，虽然 IE 还是全军覆没，但是在移动端还是可以很香地使用的

## 关于奇舞精选 ##

《奇舞精选》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

奇舞团是360集团最大的大前端团队，代表集团参与W3C和Ecma会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队Leader等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![3947e774fd16282174ecfdf4f740a001.png][]

[38c46a378d37be9ca3fff3171bcda958.gif]: /images/20221022/84342dbe061d44f9ab16bdf6fdfd513e.png
[f77ab869b91048d97a2a1d14a9bcebec.png]: /images/20221022/8c7d4c6f86d74b9598df752ba292b83a.png
[7c7fe8dc17cf4d41b204f59213d94a44.gif]: /images/20221022/d6fd27b76b79482a908cf39ad28e3289.png
[f886d1ed43cc6104d350eb3e7dc6baea.gif]: /images/20221022/ff467502c3294732b50a759afab361da.png
[4653ee5bd8bf2300f16ebe020697da40.png]: /images/20221022/827147eeb44f4d42bfa2ca66412c0613.png
[3947e774fd16282174ecfdf4f740a001.png]: /images/20221022/42941cb8b34f4e7eb8606276aa4313ed.png