展开收起功能实现_仅靠H5标签就能实现收拉效果？我说的是真的！

前言

最近做项目时碰到这么一个需求：

这有点类似于手风琴效果，但不一样的是很多手风琴效果是同一时间内只能有一个展开，而这个是各个部分独立的，你展不展开完全不会影响我的展开与否。其实这种效果简直再普遍不过了，网上随便一搜就出来一大堆。但不一样的是，我在接到这个需求的时候突然想起来很久以前看过张鑫旭大佬的一篇文章，模糊的记得那篇文章里说过有个什么很方便的 CSS 属性能够实现这一效果，不用像咱们平时实现的那些展开收起那样写很多的代码，于是就来到他的博客里面一顿搜，找了半天终于发现原来是我记错了，并不是什么 CSS3 属性，而是 HTML5 标签！

details

想要非常轻松的实现一个收拉效果，需要用到三个标签，分别是：、以及随意…

随意是什么意思？意思是什么标签都可以？

咱们先只写一个标签来看看页面上会出现什么：

<details>details>

运行结果：

可以看到非常有意思的一个现象：我们明明什么文字都没有写，但页面上却出现了详细信息这四个字，因为如果你在标签里没有写的话，浏览器会自动给你补上一个详细信息，那有人可能奇怪了，怎么补的是中文呢？那老外不写的话也会来一个详细信息？其实是这样:

现代浏览器经常偷偷获取用户隐私信息，包括但不仅限于用人工智能判断屏幕前的用户是中国人还是外国人，然后根据用户的母语来动态向标签里加入不同语言的'详细信息'这几个字。

开个玩笑，其实是根据你当前操作系统的语言来判断的，要是你把系统语言改成其它语言的话出现的就不再是'详细信息'这几个中文字符了。

那如果我们在标签里写了呢？

<details>
  <summary>公众号：summary>
details>

运行结果：

可以看到里面的文字就会在三角箭头旁边的标题位置展示出来，可是我们展开三角箭头发现里面什么内容也没有，那么内容写在哪呢？

只需写在的后面就可以了，那是不是还要写个固定标签呢？比如什么之类的，其实在之后无论写什么标签都可以，当然必须得是合法的 HTML 标签啊，比如我们写个

标签来试试看：

<details>
  <summary>公众号：summary>
  <h1>前端学不动h1>
details>

运行结果：

再换个别的标签试试：

<details>
  <summary>公众号：summary>
  <button>前端学不动button>
details>

运行结果：

看！我们仅用了三个标签就完成了一个最简单的收拉效果！以前在网上看到类似的效果要么就是 getElementById 获取到 DOM 元素，然后添加 onclick 事件控制下方元素的 style 属性，要么就是纯 CSS 实现，写几个单选按钮配合兄弟选择器来控制后方元素的显隐，抑或是 CSS 与 JS 相结合来实现的，但仅靠 HTML 标签来实现这一效果还是非常清新脱俗的！并且十分简洁、非常节约代码量、也更加直观易于理解。

深入测试

既然标签后面写什么都行，那么可不可以写很多个标签呢？我们来测试一下：

<details>
  <summary>公众号：summary>
  <button>前端学不动button>
  <span>前端学不动span>
  <h1>前端学不动h1>
  <a href="#">前端学不动a>
  <strong>前端学不动strong>
details>

运行结果：

那展开收起那部分的内容只能放在标签之后吗？如果放它前面呢：

<details>
  <button>前端学不动button>
  <span>前端学不动span>
  <h1>前端学不动h1>
  <a href="#">前端学不动a>
  <strong>前端学不动strong>
  <summary>公众号：summary>
details>

运行结果：

效果居然一模一样，看来展开收起的那部分应该是在标签内部的除标签之外的所有内容。那如果写两个标签呢：

<details>
  <button>前端学不动button>
  <span>前端学不动span>
  <h1>前端学不动h1>
  <a href="#">前端学不动a>
  <strong>前端学不动strong>
  <summary>公众号：summary>
  <summary>summarysummary>
details>

运行结果：

可以看到只有第一个出现的标签是真正的summary，后续出现的其他所有标签(包括其它的)都是展开收起的那部分。

既然所有标签都可以，那么也包括咯？