展开收起功能实现_仅靠H5标签就能实现收拉效果？我说的是
真的！
前⾔
最近做项⽬时碰到这么⼀个需求：
这有点类似于⼿风琴效果，但不⼀样的是很多⼿风琴效果是同⼀时间内只能有⼀个展开，⽽这个是各个部分独⽴的，你展不展开完全不会影响我的展开与否。其实这种效果简直再普遍不过了，⽹上随便⼀搜就出来⼀⼤堆。但不⼀样的是，我在接到这个需求的时候突然想起来很久以前看过张鑫旭⼤佬的⼀篇⽂章，模糊的记得那篇⽂章⾥说过有个什么很⽅便的 CSS 属性能够实现这⼀效果，不⽤像咱们平时实现的那些展开收起那样写很多的代码，于是就来到他的博客⾥⾯⼀顿搜，了半天终于发现原来是我记错了，并不是什么 CSS3 属性，⽽是
HTML5 标签！
details
想要⾮常轻松的实现⼀个收拉效果，需要⽤到三个标签，分别是：<details>、<summary>以及随意…
随意是什么意思？意思是什么标签都可以？
咱们先只写⼀个<details>标签来看看页⾯上会出现什么：
<details></details>
运⾏结果：
svg和h5的关系
可以看到⾮常有意思的⼀个现象：我们明明什么⽂字都没有写，但页⾯上却出现了详细信息这四个字，因为如果你在标签⾥没有
写<summary>的话，浏览器会⾃动给你补上⼀个<summary>详细信息</summary>，那有⼈可能奇怪了，怎么补的是中⽂呢？那⽼外不
写<summary>的话也会来⼀个<summary>详细信息</summary>？其实是这样:
现代浏览器经常偷偷获取⽤户隐私信息，包括但不仅限于⽤⼈⼯智能判断屏幕前的⽤户是中国⼈还是外国⼈，然后根据⽤户的母语来动态向 <summary>标签⾥加⼊不同语⾔的'详细信息'这⼏个字。
开个玩笑，其实是根据你当前操作系统的语⾔来判断的，要是你把系统语⾔改成其它语⾔的话出现的就不再是'详细信息'这⼏个中⽂字符了。
那如果我们在<details>标签⾥写了<summary>呢？
<details>
<summary>：</summary>
</details>
运⾏结果：
可以看到<summary>⾥⾯的⽂字就会在三⾓箭头旁边的标题位置展⽰出来，可是我们展开三⾓箭头发现⾥⾯什么内容也没有，那么内容写在哪呢？
只需写在<summary>的后⾯就可以了，那是不是还要写个固定标签呢？⽐如什么<describe>之类的，其实在<summary>之后⽆论写什么标签都可以，当然必须得是合法的 HTML 标签啊，⽐如我们写个<h1>
标签来试试看：
<details>
<summary>：</summary>
<h1>前端学不动</h1>
</details>
运⾏结果：
再换个别的标签试试：
<details>
<summary>：</summary>
<button>前端学不动</button>
</details>
运⾏结果：
看！我们仅⽤了三个标签就完成了⼀个最简单的收拉效果！以前在⽹上看到类似的效果要么就是 getElementById 获取到 DOM 元素，然后添加 onclick 事件控制下⽅元素的 style 属性，要么就是纯 CSS 实现，写⼏个单选按钮配合兄弟选择器来控制后⽅元素的显隐，抑或是CSS 与 JS 相结合来实现的，但仅靠 HTML 标签来实现这⼀效果还是⾮常清新脱俗的！并且⼗分简洁、⾮常节约代码量、也更加直观易于理解。
深⼊测试
既然<summary>标签后⾯写什么都⾏，那么可不可以写很多个标签呢？我们来测试⼀下：
<details>
<summary>：</summary>
<button>前端学不动</button>
<span>前端学不动</span>
<h1>前端学不动</h1>
<a href="#">前端学不动</a>
<strong>前端学不动</strong>
</details>
运⾏结果：
那展开收起那部分的内容只能放在<summary>标签之后吗？如果放它前⾯呢：
<details>
<button>前端学不动</button>
<span>前端学不动</span>
<h1>前端学不动</h1>
<a href="#">前端学不动</a>
<strong>前端学不动</strong>
<summary>：</summary>
</details>
运⾏结果：
效果居然⼀模⼀样，看来展开收起的那部分应该是在<details>标签内部的除<summary>标签之外的所有内容。那如果写两个<summary>标签呢：
<details>
<button>前端学不动</button>
<span>前端学不动</span>
<h1>前端学不动</h1>
<a href="#">前端学不动</a>
<strong>前端学不动</strong>
<summary>：</summary>
<summary>summary</summary>
</details>
运⾏结果：
可以看到只有第⼀个出现的<summary>标签是真正的summary，后续出现的其他所有标签(包括其它的
)都是展开收起的那部分。
既然所有标签都可以，那么也包括<details>咯？
<details>
<summary>project</summary>
<details>
<summary>html</summary>
index.html
</details>
<details>
<summary>css</summary>
reset.css
</details>
<details>
<summary>js</summary>
main.js
</details>
</details>
运⾏结果：
这玩意有点意思，利⽤这种嵌套写法可以轻松实现编辑器左侧的那些⽂件区的效果。
加⼊样式
虽然可以很轻松、甚⾄在不⽤写 CSS 代码的情况下就实现展开收起效果，但毕竟不写 CSS 只是实现了个最基础的乞丐版效果，很多⼈都不想要点击的时候出现的那个轮廓：
在⾕歌浏览器和 Safari 浏览器下都会出现这个轮廓，⽕狐就没有这玩意，咱们只需要给<summary>标签设置 outline 属性就可以了，⼀般如果你的项⽬引⼊了抹平浏览器样式间差异的 reset.css ⽂件的话，就不⽤写这个 CSS 了，为了⽅便同时观看 HTML、CSS 和 JS，我们来⽤ Vue 的格式来写代码：
<template>
<details>
<summary>project</summary>
<details>
<summary>html</summary>
index.html
</details>
<details>
<summary>css</summary>
reset.css
</details>
<details>
<summary>js</summary>
main.js
</details>
</details>
</template>
<style>
summary { outline: none }
</style>
运⾏结果：
这样看起来就舒服多啦！但是还有个问题：那个三⾓箭头太傻⼤⿊粗了，⼀般我们很少会⽤这样的箭头，⽽且我们也不⼀定⾮得让它在左边待着，那么怎么修改箭头的样式呢？
在⾕歌浏览器以及 Safari 浏览器下我们需要⽤::-webkit-details-marker伪元素，在⽕狐浏览器下我们要⽤::-moz-list-bullet伪元素，⽐如我们想让它别那么傻⼤⿊粗：
<template>
<details>
<summary>project</summary>
<details>
<summary>html</summary>
index.html
</details>
<details>
<summary>css</summary>
reset.css
</details>
<details>
<summary>js</summary>
main.js
</details>
</details>
</template>
<style>
summary { outline: none }
/
* ⾕歌、Safari */
::-webkit-details-marker {
transform: scale(.5);
color: gray
}
/* ⽕狐 */
::-moz-list-bullet { color: gray }
</style>
运⾏结果：
是不是没那么傻⼤⿊粗了，不过有时我们不想要这个三⾓形的箭头，想要的是⾃⼰⾃定义的箭头，那么我们就需要先把这个默认的三⾓给隐藏掉：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。