三级导航下拉菜单
2019-08-01 本文已影响0人
十九_1186
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.box{
width: 200px;
background-color: #535a6c;
}
.box-list{
width: 180px;
margin-left: 20px;
}
.box-list>li>a{
width: 100%;
height: 30px;
color: white;
display: block;
}
.box-list>li:hover{
background: rgba(0, 0, 0, 0.1);
}
.box-list>li>ul{
display: none;
}
.box-list>li>ul>li>a{
width: 100%;
height: 20px;
color: white;
display: block;
}
.box-list-menu{
width: 160px;
margin-left: 20px;
}
.box-list-menu>li>ul{
display: none;
width: 140px;
margin-left: 20px;
}
.box-list-menu>li:hover{
background: rgba(0, 0, 0, 0.1);
}
.box-list-menu>li>ul>li{
color: white;
}
.box-list-menu>li>ul>li:hover{
background: rgba(0, 0, 0, 0.1);
}
</style>
<body>
<div class="box">
<ul class="box-list">
<li>
<a href="#">1</a>
<ul class="box-list-menu">
<li>
<a href="#">1</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
<a href="#">2</a>
<ul>
<li>q</li>
<li>b</li>
<li>e</li>
<li>s</li>
</ul>
</li>
<li>
<a href="#">3</a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="#">4</a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">2</a>
<ul class="box-list-menu">
<li>
<a href="#">a</a>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</li>
<li>
<a href="#">b</a>
<ul>
<li>c</li>
<li>d</li>
<li>e</li>
<li>g</li>
</ul>
</li>
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">3</a>
<ul class="box-list-menu">
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">4</a>
<ul class="box-list-menu">
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a href="#"></a>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
<script>
nav(".box-list");
nav(".box-list-menu");
function nav(dome) {
$(dome).children().children('a').on("click",function(){
if($(this).siblings('ul').is(":hidden")){
if($(this).parent('li').parent('ul').parent('li')){
$(this).parent('li').parent('ul').parent('li').siblings('li').children('ul').children('li').children('ul').slideUp();
}
$(this).parent('li').children('ul').slideDown().parent('li').siblings('li').children('ul').slideUp();
// $(this).css('background','rgba(0, 0, 0, 0.1)').siblings('li').children('a').css('background-color','#535a6c')
$(this).parent('li').css('background','rgba(0, 0, 0, 0.1)').siblings('li').css('background','');
}else {
$(this).siblings('ul').slideUp();
$(this).parent('li').css('background','')
}
})
$(dome).children('li').children('ul').children('li').children('ul').on("click","li",function () {
$(this).css('background','rgba(0,0,0,0.1)').siblings().css('background','').parents('ul').parent('li').siblings('li').children('ul').children('li').css('background','');
})
}
</script>
