前言
本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是因为我最近项目中用到了类似效果,我用vue相关知识实现并不雅观,用html5和css3实现,则更加完美。
项目案例
项目中有如下效果:
好多展开收起,对于这个的实现,我一开始用了vue一些比较挫的dom操作,就是父元素toggleClass一个类名,进行子元素的显示和隐藏。
rush:js;">
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");
}
}
这样写,既不友好,后期又难以维护。最近重构项目的时候,把这些地方都重构了,用了今天介绍的方法!更多重构要点,请点击这篇文章。
html5和css3实现展开收起
代码如下:
css代码
代码解释
html5的detail和summary本身就是一个展开收起的效果。假如不了解, 可以查看 。
隐藏默认三角如下:
details和summary的ui优化
张鑫旭有篇文章,对details和summary介绍的很详细
对应其UI的优化,主要有如下几个方面:
1、小三角的优化,包括颜色、隐藏、位置、替换。 2、outline轮廓的去除
小三角颜色修改
小三角位置修改-右侧显示
outline轮廓的去除
我上面用的是
这样对无障碍访问非常不友好,优化方案可以看张鑫旭大神的做法。
details和summary其他应用
1、更多效果
测试内容测试内容
haorooms测试内容测试内容...
更多
css代码
rush: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代码:
rush: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;
}
3、树形菜单效果
CSS代码:
summary::before {
background: linear-gradient(to right,#999) no-repeat center;
background-size: 10px 2px;
}
rush:xhtml;">
我的视频
爆肝工程师的异世界狂想曲
tv1-720p.mp4
tv2-720p.mp4
...
tv10-720p.mp4
七大罪
七大罪B站00合集.mp4
珍藏动漫网盘地址.txt
我们的小美好.mp4
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/vue/33662.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。