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

网友投稿 257 2023-02-17


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.classLishttp://t.toggle("toggleclass");

target.children[0].classList.toggle("el-icon-arrow-right");

}

}

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

html5和css3实现展开收起

代码如下:

图表参数

这里是包含的div等其他展示元素

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、更多效果

测试内容测试内容

haorooms测试内容测试内容...

更多

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代码:

http://

我的消息

我的回答12

我的私信

未评价订单2

我的关注

这里放一段文字表明上面的是悬浮效果。

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代码:

我的视频

爆肝工程师的异世界狂想曲

...

七大罪


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java实现XML文件学生通讯录
下一篇:微信扫码支付接口开发(微信二维码支付接口)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~