基于JavaScript实现多级菜单效果
程序员文章站
2022-07-05 20:55:30
本文实例为大家分享了js实现多级菜单效果展示的具体代码，供大家参考，具体内容如下
具体代码如下：
本文实例为大家分享了js实现多级菜单效果展示的具体代码，供大家参考，具体内容如下
具体代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
ul,li{
list-style:none;
}
.box{
margin:10px;
padding:10px;
width:300px;
border:1px dashed #008000;
/*渐进增强:首先设置一个纯色的背景，对于不兼容css3的浏览器来说会使用纯色，对于兼容的浏览器，我们在下面在额外的增加一些渐变色，这样会覆盖掉上面*/
background:#ffe470;
background:-webkit-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
background:-moz-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
background:-o-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
background:linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);
}
.box li{
position:relative;
line-height:30px;
}
.box em{
position:absolute;
top:7px;
left:0;
width:16px;
height:16px;
background:url("img/icon.png") no-repeat -59px -28px;
cursor:pointer;
}
.box span{
display:block;
padding-left:20px;
}
.box em.open{
background-position:-42px -28px;
}
.box .two{
margin-left:20px;
}
.box .three{
margin-left:40px;
}
.box .four{
margin-left:60px;
}
.box .two,.box .three,.box .four{
display:none;
}
</style>
</head>
<body>
<div class='box' id='box'>
<ul>
<li>
<em></em>
<span>第一级第一个</span>
<ul class='two'>
<li><span>第二级第一个</span></li>
<li>
<em></em><span>第二级第二个</span>
<ul class='three'>
<li><span>第三极第一个</span></li>
<li><span>第三极第二个</span></li>
<li>
<em></em><span>第三极第三个</span>
<ul class='four'>
<li><span>第四级第一个</span></li>
<li><span>第四级第二个</span></li>
<li><span>第四级第三个</span></li>
</ul>
</li>
</ul>
</li>
<li>
<em></em><span>第二级第三个</span>
<ul class='three'>
<li><span>第三级第一个</span></li>
<li><span>第三级第二个</span></li>
<li><span>第三级第三个</span></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<em></em>
<span>第一级第一个</span>
<ul class='two'>
<li><span>第二级第一个</span></li>
<li>
<em></em><span>第二级第二个</span>
<ul class='three'>
<li><span>第三极第一个</span></li>
<li><span>第三极第二个</span></li>
<li>
<em></em><span>第三极第三个</span>
<ul class='four'>
<li><span>第四级第一个</span></li>
<li><span>第四级第二个</span></li>
<li><span>第四级第三个</span></li>
</ul>
</li>
</ul>
</li>
<li>
<em></em><span>第二级第三个</span>
<ul class='three'>
<li><span>第三级第一个</span></li>
<li><span>第三级第二个</span></li>
<li><span>第三级第三个</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script>
var box = document.getelementbyid('box');
//把列表中的span(前面有em的span)设置一个 cursor:pointer的样式
var spanlist = box.getelementsbytagname("span");
for(var i = 0;i<spanlist.length;i++){
var curspan = spanlist[i];
var curpre = utils.prev(curspan);
if(curpre && curpre.tagname.tolowercase()==="em"){
curspan.style.cursor = "pointer"
}
}
//使用事件委托实现我们的操作
box.onclick = function(e){
e = e || window.event;
var tar = e.target || e.srcelement;
//只有点击的是em或者span标签，我们才进行展开收缩的操作
if(/^(em|span)$/i.test(tar.tagname)){
var parent = tar.parentnode;//获取父亲
var firstul = utils.children(parent,"ul")[0]//获取父亲子集中的第一个ul标签
var oem = utils.children(parent,"em")[0]
if(firstul){
//如果隐藏让显示，否则让隐藏
var isblock = utils.getcss(firstul,"display") === "block" ? true : false;
if(isblock){
firstul.style.display = "none";
if(oem){
utils.removeclass(oem,"open")
}
//当外层的收起，里层所有的ul都要隐藏，所有的em都要移除open样式
var allul = parent.getelementsbytagname("ul"),allem = parent.getelementsbytagname("em");
for(var i = 0;i<allul.length;i++){
allul[i].style.display = "none";
utils.removeclass(allem[i],"open");
}
}else{
firstul.style.display = "block";
if(oem){
utils.addclass(oem,"open")
}
}
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Vue.js学习笔记之常用模板语法详解
下一篇： 打字效果动画的4种实现方法(超简单)