前言
本文题目中虽然写有vue和react,但是并非vue和react相关知识，而是最基本的html5和css3的一些知识，之所以写vue，是因为我最近项目中用到了类似效果，我用vue相关知识实现并不雅观，用html5和css3实现，则更加完美。
项目案例
项目中有如下效果：
好多展开收起，对于这个的实现，我一开始用了vue一些比较挫的dom操作，就是父元素toggleClass一个类名，进行子元素的显示和隐藏。
这样写，既不友好，后期又难以维护。最近重构项目的时候，把这些地方都重构了，用了今天介绍的方法！更多重构要点，请点击这篇文章。
html5和css3实现展开收起
代码如下：
css代码
代码解释
html5的detail和summary本身就是一个展开收起的效果。假如不了解， 可以查看 。
隐藏默认三角如下：
details和summary的ui优化
张鑫旭有篇文章，对details和summary介绍的很详细
对应其UI的优化，主要有如下几个方面：
1、小三角的优化，包括颜色、隐藏、位置、替换。 2、outline轮廓的去除
小三角颜色修改
小三角位置修改-右侧显示
outline轮廓的去除
我上面用的是
这样对无障碍访问非常不友好，优化方案可以看张鑫旭大神的做法。
details和summary其他应用
1、更多效果
测试内容测试内容
haorooms测试内容测试内容...
更多
css代码
2、悬浮菜单效果
CSS代码：
Box-shadow: inset 1px 0 #ddd,inset -1px 0 #ddd;
}
[open] summary::after {
transform: rotate(180deg);
}
.Box {
position: absolute;
border: 1px solid #ddd;
background-color: #fff;
min-width: 100px;
padding: 5px 0;
margin-top: -1px;
}
.Box a {
display: block;
padding: 5px 10px;
color: inherit;
}
.Box a:hover {
background-color: #f0f0f0;
}
.Box sup {
position: absolute;
color: #cd0000;
font-size: 12px;
margin-top: -.25em;
}
