利用jQuery实现三级侧边导航栏

实现侧边导航栏效果,导航栏一共含有三级目录,点击父标题可上下收展其他子标题,记录自己用过的一种写法,主要用jQuery实现。
实现效果图:实现效果图

具体代码如下:


HTML布局

<div class="content">    
<div class="content_left">        
<div class="left_title">  
        LOGO        
</div>
<!-- 每一个菜单项 -->      
<div class="menu">       
<div class="menu-title">一级菜单</div>                
<ul class="menu-content">                    
<li class="two">二级菜单</li >                       
<ul class="menu-content-third">                          
<li>三级菜单</li>                            
<li>三级菜单</li>                            
<li>三级菜单</li>                        
</ul>                    
<li >二级菜单</li>                    
<li >二级菜单</li>               
 </ul>        
 </div>        
 <div class="menu">            
 <div class="menu-title">一级菜单</div>                
 <ul class="menu-content">                   
  <li >二级菜单</li>                    
  <li >二级菜单</li>                    
  <li >二级菜单</li>                
  </ul>        
  </div>      
  </div>    
  <div class="content_right"> 内容区域 </div>
  </div>

CSS样式

*{            
padding: 0;            
margin: 0;           
cursor: default;       
}        
li{            
list-style: none;       
}       
.content{            
width: 100%;            
height: 100%;        
}        
.content_left{           
width: 19%;            
height: 600px;            
border: 1px solid #000000;            
float: left;        
}        
.content_right{            
width: 80.8%;           
 height: 600px;           
  background-color: antiquewhite;            
  float: right;         
  }        
.left_title{           
height: 50px;           
width: 100%;          
text-align: center;         
line-height: 50px;         
background-color: aquamarine;      
}       
.menu{           
width: 100%;           
text-align: center;     
}     
.menu-title{      
 height: 25px;        
margin-right: 40px;      
cursor: pointer;    
}      
.content-content{       
display: block;     
 }   
.menu-content li:hover{       
background-color: azure;         
 cursor: pointer;      
 }    
 .menu-content-third{       
margin-left: 40px;      
display:none;     
 }

jQuery代码

$(function(){
//第一步,隐藏子菜单项//找到每一个菜单项,用each循环    
$(".menu").each(function(){        
$(this).children(".menu-content").hide();    
});
//给所有的主标题添加点击事件    
$(".menu-title").each(function(){       
 $(this).click(function(){            
 //弹出当前主标题下的子标题列表          
var mList=$(this).parents(".menu").children(".menu-content"); 
//展开、收起导航栏        
mList.slideToggle();        
});   
});        
//找到二级标签,给他注册点击事件,收展它下面的三级标题组  
$(".two").click(function(){        
$(".two").next().slideToggle();    
});
})

猜你喜欢

转载自blog.csdn.net/qq_44782585/article/details/108148741