炫意html5
最早CSS3和HTML5移动技术网站之一

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

前言

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

项目案例

项目中有如下效果:

enter image description here

好多展开收起,对于这个的实现,我一开始用了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 open>
<summary>图表参数</summary>
<content>这里是包含的div等其他展示元素</content>
</details>

css代码

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

代码解释

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

隐藏默认三角如下:

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

details和summary的ui优化

张鑫旭有篇文章,对details和summary介绍的很详细,点击查看

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

1、小三角的优化,包括颜色、隐藏、位置、替换。

2、outline轮廓的去除

小三角颜色修改

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

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

.炫H5 summary {
width: -moz-fit-content;
width: fit-content;
direction: rtl;
}
.炫H5 ::-webkit-details-marker {
direction: ltr;
}
.炫H5 ::-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>
<p>炫H5测试内容测试内容...</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、悬浮菜单效果

点击查看张鑫旭的做法

3、树形菜单效果

点击查看张鑫旭的做法

炫意HTML5 » vue和react等项目中更简单的实现展开收起更多等效果

Java基础教程Android基础教程