利用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();    
});
})
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML代码: ``` <div class="sidebar"> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li><a href="#section4">Section 4</a></li> </ul> </div> <div id="section1" class="section">Section 1</div> <div id="section2" class="section">Section 2</div> <div id="section3" class="section">Section 3</div> <div id="section4" class="section">Section 4</div> ``` CSS代码: ``` .sidebar { position: fixed; top: 50%; left: 0; transform: translateY(-50%); } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar li { margin-bottom: 10px; } .sidebar a { display: block; padding: 5px; border-radius: 5px; text-decoration: none; color: #fff; background-color: #333; transition: background-color 0.3s ease; } .sidebar a:hover { background-color: #555; } .section { height: 500px; margin-bottom: 50px; } ``` jQuery代码: ``` $(document).ready(function() { // 点击侧边导航栏,滚动到指定区域 $('.sidebar a').click(function(e) { e.preventDefault(); var target = $(this).attr('href'); $('html, body').animate({ scrollTop: $(target).offset().top }, 500); }); // 监听滚动事件,高亮显示对应的导航栏 $(window).scroll(function() { var sections = $('.section'); var positions = []; sections.each(function() { positions.push($(this).offset().top - 200); }); var scrollTop = $(window).scrollTop(); var currentIndex = 0; for (var i = 0; i < positions.length; i++) { if (scrollTop >= positions[i]) { currentIndex = i; } } $('.sidebar a').removeClass('active'); $('.sidebar li').eq(currentIndex).find('a').addClass('active'); }); }); ``` 解释: 1. 点击侧边导航栏,通过`animate`函数实现页面滚动到指定区域; 2. 监听滚动事件,获取每个区域的位置信息,根据滚动位置计算出当前应该高亮显示的导航栏,并在对应的导航栏上加上`active`类名; 3. `active`类名对应的样式可以改变导航栏的背景色、字体颜色等,以突出显示当前所在的位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值