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

2019-11-19 14:20:39

字体：大中小

来源：转载

供稿：网友

前言

本文题目中虽然写有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优化

张鑫旭有篇文章，对details和summary介绍的很详细

对应其UI的优化，主要有如下几个方面：

1、小三角的优化，包括颜色、隐藏、位置、替换。
2、outline轮廓的去除

小三角颜色修改

.haorooms ::-webkit-details-marker {  color: gray;}.haorooms ::-moz-list-bullet {  color: gray;}

小三角位置修改-右侧显示

.haorooms summary {  width: -moz-fit-content;  width: fit-content;  direction: rtl;}.haorooms ::-webkit-details-marker {  direction: ltr;}.haorooms ::-moz-list-bullet {  direction: ltr;}

outline轮廓的去除

我上面用的是

-webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    outline: 0;

这样对无障碍访问非常不友好，优化方案可以看张鑫旭大神的做法。

details和summary其他应用

1、更多效果

<details>  <summary>    <p>测试内容测试内容</p>    <div class="more">      <p>haorooms测试内容测试内容...</p>    </div>    <a>更多</a>  </summary> </details>

css代码

::-webkit-details-marker {  display: none;}::-moz-list-bullet {  font-size: 0;  float: left;}summary {  user-select: none;  outline: 0;}.more {  display: none;}[open] .more {  display: block;}[open] summary a {  font-size: 0;}[open] summary a::before {  content: '收起';  font-size: 14px;}

2、悬浮菜单效果

CSS代码：

/* 隐藏默认三角 */::-webkit-details-marker {  display: none;}::-moz-list-bullet {  font-size: 0;  float: left;}summary {  display: inline-block;  padding: 5px 28px;  text-indent: -15px;  user-select: none;  position: relative;  z-index: 1;}summary::after {  content: '';  position: absolute;  width: 12px; height: 12px;  margin: 4px 0 0 .5ch;  background: url(./arrow-on.svg) no-repeat;  background-size: 100% 100%;  transition: transform .2s;}[open] summary,summary:hover {  background-color: #fff;  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;}

HTML代码：

<div class="bar">  <details>    <summary>我的消息</summary>     <div class="box">      <a href>我的回答<sup>12</sup></a>      <a href>我的私信</a>      <a href>未评价订单<sup>2</sup></a>      <a href>我的关注</a>    </div>  </details></div><p>这里放一段文字表明上面的是悬浮效果。</p>

3、树形菜单效果

CSS代码：

/* 隐藏默认三角 */::-webkit-details-marker {  display: none;}::-moz-list-bullet {  font-size: 0;  float: left;}details {  padding-left: 20px;}summary::before {  content: '';  display: inline-block;  width: 12px; height: 12px;  border: 1px solid #999;  background: linear-gradient(to right, #999, #999) no-repeat center, linear-gradient(to top, #999, #999) no-repeat center;  background-size: 2px 10px, 10px 2px;  vertical-align: -2px;  margin-right: 6px;  margin-left: -20px;}[open] > summary::before {  background: linear-gradient(to right, #999, #999) no-repeat center;  background-size: 10px 2px;}

HTML代码：

<details>  <summary>我的视频</summary>  <details>    <summary>爆肝工程师的异世界狂想曲</summary>    <div>tv1-720p.mp4</div>    <div>tv2-720p.mp4</div>    ...    <div>tv10-720p.mp4</div>  </details>  <details>    <summary>七大罪</summary>    <div>七大罪B站00合集.mp4</div>  </details>  <div>珍藏动漫网盘地址.txt</div>  <div>我们的小美好.mp4</div></details>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue webpack打包优化操作技巧

下一篇：Vue 2.5.2下axios + express 本地请求404的解决方法