多级菜单
2017-07-24 本文已影响9人
icessun
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多级菜单</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
.wrap{
width: 500px;
margin:10px;
padding:10px;
/*linear-gradient：渐变要指定内核才能有效果*/
background: -webkit-linear-gradient(top,lightcyan,lightgoldenrodyellow,lightcoral);
}
.wrap li{
line-height: 25px;
position: relative;
}
.wrap em{
position: absolute;
width: 16px;
height:16px;
top: 6px;
/*加号*/
background: url(img/icon.png) no-repeat -59px -28px;
/*减号*/
/*background: url(img/icon.png) no-repeat -42px -28px;*/
}
.wrap li span{
margin-left: 20px;
}
.wrap li em:hover{
cursor: pointer;
}
.wrap ul{
/*display: none;*/
}
.wrap .one{
text-indent: 40px;
}
.wrap .two{
text-indent: 80px;
}
.wrap .three{
text-indent: 120px;
}
</style>
</head>
<body>
<ul class="wrap" id="wrap">
<li><em></em><span>第一级第一个</span>
<ul class="one">
<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>
</ul>
</li>
<li><span>第三级第三个</span></li>
</ul>
</li>
<li><span>第二级第二个</span></li>
<li><em></em><span>第二级第三个</span>
<ul class="two">
<li><span>第三级第一个</span></li>
<li><span>第三级第二个</span></li>
</ul>
</li>
<li><em></em><span>第二级第四个</span>
<ul class="two">
<li><em></em><span>第三级第一个</span>
<ul class="three">
<li><span>第四级第一个</span></li>
<li><span>第四级第二个</span></li>
<li><span>第四级第三个</span></li>
</ul>
</li>
<li><span>第三级第二个</span></li>
<li><span>第三级第三个</span></li>
<li><span>第三级第四个</span></li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="js/jquery.js"></script>
<script type="text/javascript">
var $wrap=$('#wrap');
var $aSpan=$wrap.find('span')
// console.log($aSpan)
// 使得每一个有子级的菜单都呈现出小手，可以点击 遍历对象的方法：$.each()
$.each($aSpan, function(index,item) {
//console.log($(item).prev());// 数组形式
// console.log(item)
//console.log($(item));
// item是一个原生js对象，纯粹的标签，使用jquery方法prev（）,找到span的父级元素
var preEm=$(item).prev();
if(preEm.length){
$(item).css('cursor','pointer'); // 添加的是行内样式
}
});
//当一个容器里面有多个点击事件发生的时候，使用事件委托给容器
$wrap.click(function(e){
//如果事件源是(span),看span前是否有em;如果有em，再看容器中是否有ul，显示-隐藏，隐藏-显示； 注意改变em的背景图；
var target= e.target;//原生js 获取事件源
// console.log(target.tagName) //大写的事件名
// 判断 事件源
if(target.tagName.toLowerCase()=== 'span' || target.tagName.toLowerCase()=='em'){
var $parent=$(target.parentNode);
// console.log($parent);
var $ul=$parent.children('ul'); // 找的是li下面的子代childrenul
console.log($ul)
var $em=$parent.children('em');
if($ul.length){// 说明在父节点li里面找到了ul，li里面还可以展开
if($ul.css('display')=='block'){//收
//当收起来的时候，让该容器下所有的ul都收起来；同时，让该容器下，所有的em都变成+号；
var $aUl=$parent.find('ul');// 所有的，包括孙子ul
var $aEm=$parent.find('em');
$aUl.css('display','none');
$aEm.css('background','url("img/icon.png") no-repeat -59px -28px')
}else{//展开
$ul.css('display','block');
$em.css('background','url("img/icon.png") no-repeat -42px -29px')
}
}
}
})
</script>
</body>
</html>
