vue和react等项目中更简单的实现展开收起更多等效果示例

前言

本文题目中虽然写有vue和react,但是并非vue和react相关知识，而是最基本的html5和css3的一些知识，之所以写vue，是因为我最近项目中用到了类似效果，我用vue相关知识实现并不雅观，用html5和css3实现，则更加完美。

项目案例

项目中有如下效果：

好多展开收起，对于这个的实现，我一开始用了vue一些比较挫的dom操作，就是父元素toggleClass一个类名，进行子元素的显示和隐藏。

由于这个方法是通用方法，项目中好多地方使用，代码大概如下：

toggleShow() {
 let target = window.event.srcElement;
 if (target.nodeName == "SPAN") {
  target.parentNode.parentNode.classList.toggle("toggleclass");
  target.classList.toggle("el-icon-arrow-right");
 } else {
  target.parentNode.classList.toggle("toggleclass");
  target.children[0].classList.toggle("el-icon-arrow-right");
 }
}

这样写，既不友好，后期又难以维护。最近重构项目的时候，把这些地方都重构了，用了今天介绍的方法！更多重构要点，请点击vue项目重构技术要点 这篇文章。

html5和css3实现展开收起

代码如下：

<details class="haorooms" open>
  <summary>图表参数</summary>
  <content>这里是包含的div等其他展示元素</content>
</details>

css代码

.haorooms{position:relative}
.haorooms summary{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
}
/* 自定义的三角 */
.haorooms summary::after {
  content: '';
  position: absolute;
  left:0;
  top:0;
  width: 15px; height: 15px;
  background: url(./haorooms.png) no-repeat; /* 自定义的三角图片 */
  background-size: 100% 100%;
  transition: transform .2s;
}
.haorooms:not([open]) summary::after {
  transform: rotate(90deg);
}
/* 隐藏默认三角 */
.haorooms ::-webkit-details-marker {
  display: none;
}
.haorooms ::-moz-list-bullet {
  font-size: 0;
}

代码解释

html5的detail和summary本身就是一个展开收起的效果。假如不了解， 可以查看 。

隐藏默认三角如下：

.haorooms ::-webkit-details-marker {
  display: none;
}
.haorooms ::-moz-list-bullet {
  font-size: 0;
}

details和summary的ui优化