您现在的位置是:首页 > WEB > JSJS

js事件代理实现无限级菜单

阿龙2019-07-25【JS】人已围观

简介利用的是js中的事件代理实现的,可以很灵活的自由扩展。

以上就最终的效果,利用的是js中的事件代理实现的,可以很灵活的自由扩展。以下是原码,图“+”“-”图片就自已随便百度找下即可: html:
<div class="wrap">
<ul class="levl">
<li><em class="icon off" off= 'false'></em><h3>综合类</h3>
<ul class="levl1">
<li><em class="icon off"></em><h3>服装</h3>
<ul class="levl2">
<li><em class="icon off"></em><h3>时尚专区</h3>
<ul class="levl3">
<li><h3>夏装</h3></li>
<li><em class="icon off"></em><h3>冬装</h3>
<ul class="levl4">
<li><h3>上衣</h3></li>
<li><h3>裤子</h3></li>
<li><h3>鞋子</h3></li>
</ul>
</li>
<li><h3>秋装</h3></li>
</ul>
</li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
</ul>
</li>
<li><em class="icon off"></em><h3>男装</h3>
<ul class="levl2">
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
</ul>
</li>
<li><em class="icon off"></em><h3>女鞋</h3>
<ul class="levl2">
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
</ul>
</li>
<li><em class="icon off"></em><h3>男鞋</h3>
<ul class="levl2">
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
</ul>
</li>
</ul>
</li>
<li><em class="icon off" off= 'false'></em><h3>其它类</h3>
<ul class="levl1">
<li><em class="icon off"></em><h3>服装</h3>
<ul class="levl2">
<li><em class="icon off"></em><h3>时尚专区</h3>
<ul class="levl3">
<li><h3>夏装</h3></li>
<li><em class="icon off"></em><h3>冬装</h3>
<ul class="levl4">
<li><h3>上衣</h3></li>
<li><h3>裤子</h3></li>
<li><h3>鞋子</h3></li>
</ul>
</li>
<li><h3>秋装</h3></li>
</ul>
</li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
</ul>
</li>
<li><em class="icon off"></em><h3>男装</h3>
<ul class="levl2">
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
</ul>
</li>
<li><em class="icon off"></em><h3>女鞋</h3>
<ul class="levl2">
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
</ul>
</li>
<li><em class="icon off"></em><h3>男鞋</h3>
<ul class="levl2">
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
<li><h3>冬上新</h3></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
css:
*{
margin:0;
padding:0;
font-size:15px;
color:#000;
}
h3{
font-weight: normal;
line-height: 30px;
}
.wrap{
overflow: auto;
padding-left:30px;
width: 200px;
background: -webkit-linear-gradient(left top,dodgerblue,beige,gainsboro,skyblue,gainsboro,honeydew);
}
ul{
list-style: none;
}
li{
position: relative;
text-indent: 25px;
}
.levl1,.levl2,.levl3,.levl4{
margin-left: 25px;
display: none;
}
em{
position: absolute;
left:0;
top:7px;
height: 16px;
width: 20px;
}
.on{
background: url("remove.png")no-repeat center;
background-size: 16px 16px;
}
.off{
background: url("add.png")no-repeat center;
background-size: 16px 16px;
}
js:
var treeMenu = (function(){
var wrap = document.getElementsByClassName('wrap')[0],
icons = document.getElementsByClassName('icon');
[].slice.call(icons).forEach(function(item){
item.setAttribute('off',false)
})
var bingEvent = function(){
wrap.onclick = function (e){
var target = e.target,
terTag = target.nodeName;
// 统一事件源 让点击的事件都等于h3
if(target.nodeName === 'H3'){
target = target.previousElementSibling
terTag = target
}
if(target.nodeName === 'EM'){
if(target.getAttribute('off') === 'true'){ // 判断EM属性是不是真
target.nextElementSibling.nextElementSibling.style.display = 'none'
target.setAttribute('off',false) //真的就是设置一个布尔值
target.className = 'icon off'
var reg = /(off)/
if(reg.test(target.className)){
// 通过判断正则判断点击的是那个,然后拿当前事件源获取所有的子集ul
var ul = target.parentNode.getElementsByTagName('ul');
[].forEach.call(ul,function(item){
item.style.display = 'none'
item.previousElementSibling.previousElementSibling.className = 'icon off'
item.previousElementSibling.previousElementSibling.setAttribute('off',false)
})
}
}else{
target.nextElementSibling.nextElementSibling.style.display = 'block'
target.setAttribute('off',true)
target.className = 'icon on'
}
}
}
}
return {
init :function(){
var H = document.documentElement.clientHeight;
window.onresize = function(){
H = document.documentElement.clientHeight;
wrap.style.height = H + 'px'
}
wrap.style.height = H + 'px'
bingEvent()
}
}
})();
treeMenu.init()

Tags:事件代理   javascript

支持一下! ()

文章评论

    共有条评论大侠,来闹两句...

    请输入昵称:

    填入验证码:

打赏本站

  • 如果您觉得站长文章不错,可以通过扫码支付打赏一下哦!
  • 微信扫码:您说多少就多少~
  • 支付宝扫码:您说多少就多少~