左侧导航多级下拉
只要结果,不问过程的童鞋们,福利来啦,拿走不谢!
以下代码适用于:数据循环出来的列表,非数据循环出来的列表。
捉急,捉急,捉急,不废话直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧列表</title>
</head>
<style>
/*下面的的css代码不需要*/
*{
padding:0;
margin:0;
}
li{
list-style: none;
}
/*以上的css代码不需要*/
.drop_list>ul>li ul{
display: none;
}
.drop_list a{
position: relative;
padding-left: 20px;
}
.drop_list .current:before{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 7px solid;
content: "";
position: absolute;
top: 6px;
left: 0;
color: #ee8900;
}
.drop_list .current.drop:before{
border-top: 7px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
top: 9px;
left: 0;
}
.drop_list .list_ul2{
margin-left:15px;
}
.drop_list .list_ul3{
margin-left:30px;
}
.drop_list .list_ul4{
margin-left:25px;
}
</style>
<body>
<div class="drop_list">
<ul>
<li>
<a class="current">一级 第四个</a>
<ul class="list_ul2">
<li>
<a>二级</a>
</li>
</ul>
</li>
<li>
<a class="current">一级 有下拉</a>
<ul class="list_ul2">
<li>
<a class="current">二级 有下拉</a>
<ul class="list_ul3">
<li><a>三级菜单</a></li>
<li><a>三级菜单</a></li>
<li><a>三级菜单</a></li>
</ul>
</li>
<li>
<a>二级</a>
</li>
<li>
<a class="current">二级 有下拉</a>
<ul class="list_ul3">
<li>
<a class="current">三级菜单 有下拉</a>
<ul class="list_ul4">
<li><a>四级</a></li>
<li><a>四级</a></li>
<li><a>四级</a></li>
</ul>
</li>
<li><a>三级菜单</a></li>
<li><a>三级菜单</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function(){
$(".drop_list>ul>li").each(function(i){
$(".drop_list>ul>li").eq(i).find("a").click(function(){
$(this).toggleClass("drop").next().stop().slideToggle().parents().siblings().find("ul").slideUp().siblings().removeClass("drop");
})
})
})
</script>
</body>
效果图:
如果展开收起的小图标在右侧,只需修改css相关参数即可;当然具体数值根据自己需求设置;
代码救急了吗?如果帮到你了,给个好评哈。有疑问的欢迎留言讨论。