jQuery实现左侧分类菜单栏的完整代码示例
作者：像素漫游时间：2026-10-30 17:26:47浏览：340
本文介绍如何使用jQuery实现常见的左侧分类菜单栏效果。通过准备必要的图片资源和HTML结构，结合CSS样式与jQuery交互代码，详细展示了从静态页面搭建到动态特效实现的完整过程，并提供原生JS与jQuery两种方案的对比参考。
左侧分类菜单栏实现概述
在京东、淘宝等主流电商网站中，左侧分类菜单栏是极为常见的布局元素。针对这一通用功能，本文将介绍两种具体的实现路径：第一种是基于jQuery库的解决方案，第二种则是无需依赖库的原生JavaScript实现方式。
首先展示最终实现的视觉效果。
开发前准备
一、前期准备工作
1）若项目采用jQuery框架进行开发，需首先引入jQuery.js文件，可通过网络搜索获取。若不使用jQuery，则可跳过此步骤。
2）准备所需的图片资源，通过浏览器右键点击“图片另存为”即可保存至本地。
icon_nav.jpg：
img_226x40.jpg：
img_226x95.jpg：
代码实现细节
二、开发实施步骤
HTML结构代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>旅游网站左侧分类菜单代码</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="product_sort fl">
<div class="hd">旅游产品导航</div>
<div class="bd">
<div class="item">
<div class="title one"><a href="#"><i></i>出境游</a></div>
<div class="list">
<a href="#">泰国</a>
<a href="#">首尔</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉岛</a>
</div>
<div class="arrow">></div>
<div class="line"></div>
<div class="subitem">
<div class="inner">
<div class="tit tit1">
<div class="name">泰国</div>
<ul>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律宾</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文莱</a></li>
<li><a href="#">蓝梦岛</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班岛</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">马来西亚</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龙湾</a></li>
<li><a href="#">吴哥</a></li>
<li><a href="#">芽庄</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律宾</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文莱</a></li>
<li><a href="#">蓝梦岛</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班岛</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">马来西亚</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龙湾</a></li>
<li><a href="#">吴哥</a></li>
<li><a href="#">芽庄</a></li>
</ul>
</div>
<div class="tit">
<div class="name">印度尼西亚</div>
<ul>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律宾</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文莱</a></li>
<li><a href="#">蓝梦岛</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班岛</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">马来西亚</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龙湾</a></li>
<li><a href="#">吴哥</a></li>
<li><a href="#">芽庄</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="item">
<div class="title two"><a href="#"><i></i>国内游</a></div>
<div class="list">
<a href="#">泰国</a>
<a href="#">首尔</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉岛</a>
</div>
<div class="arrow">></div>
<div class="line"></div>
<div class="subitem">
<div class="inner">
<div class="tit tit1">
<div class="name">泰国</div>
<ul>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律宾</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文莱</a></li>
<li><a href="#">蓝梦岛</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班岛</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">马来西亚</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龙湾</a></li>
<li><a href="#">吴哥</a></li>
<li><a href="#">芽庄</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律宾</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文莱</a></li>
<li><a href="#">蓝梦岛</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班岛</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">马来西亚</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龙湾</a></li>
<li><a href="#">吴哥</a></li>
<li><a href="#">芽庄</a></li>
</ul>
</div>
<div class="tit">
<div class="name">印度尼西亚</div>
<ul>
<li><a href="#">沙巴</a></li>
<li><a href="#">新加坡</a></li>
<li><a href="#">菲律宾</a></li>
<li><a href="#">沙巴</a></li>
<li><a href="#">文莱</a></li>
<li><a href="#">蓝梦岛</a></li>
<li><a href="#">吉隆坡</a></li>
<li><a href="#">塞班岛</a></li>
<li><a href="#">柬埔寨</a></li>
<li><a href="#">马来西亚</a></li>
<li><a href="#">越南</a></li>
<li><a href="#">下龙湾</a></li>
<li><a href="#">吴哥</a></li>
<li><a href="#">芽庄</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//不引入jQuery，用原生代码实现特效
// var a = document.getElementsByClassName("item");
// for(var i = 0 ; i < a.length ; i++){
// a[i].onmouseenter = function(e){
// this.className +=" "+"layer";
// }
// a[i].onmouseleave = function(e){
// this.className = this.className.replace(" layer","");
// }
// }
//引入jQuery，实现特效
$(".product_sort .bd .item").hover(function(){
$(this).addClass("layer");
},function(){
$(this).removeClass("layer");
});
</script>
</body>
</html>
该部分为静态文件，代码结构清晰，直接复制使用即可。需注意，JavaScript代码已嵌入其中，分别演示了原生JS方法与引入jQuery后的两种实现逻辑。
CSS样式代码：
*{
margin:0;
padding:0;
list-style: none;
text-decoration:none;
}
/*旅游产品分类*/
.product_sort{
margin:20px;
width:226px;
height:644px;
background:#fff url(../images/img_226x95.jpg) no-repeat left bottom;
border:solid 1px #3299fd;
position:relative;
z-index:90;
}
.product_sort .hd{
width:226px;
background:url(../images/img_226x40.jpg) no-repeat;
height:40px;
line-height:40px;
text-indent:15px;
font-size:15px;
font-weight:bold;
font-family:"微软雅黑";
color:#fff;
}
.product_sort .bd{
padding-bottom:10px;
}
.product_sort .bd .item{
border-bottom:solid 1px #3299fd;
height:60px;
position:relative;
}
.product_sort .bd .item .title{
width:226px;
text-indent:43px;
height:30px;
overflow:hidden;
line-height:42px;
font-size:14px;
font-weight:bold;
color:#292929;
}
.product_sort .bd .item .title a{
color:#3299fd;
position:relative;
}
.product_sort .bd .item .title a i{
position:absolute;
background:url(../images/icon_nav.jpg) no-repeat;
}
.product_sort .bd .item .one a i{
width:19px;
height:19px;
background-position:0 0;
left:-25px;
top:-3px;
}
.product_sort .bd .item .two a i{
width:22px;
height:20px;
background-position:0 -51px;
left:-28px;
top:-5px;
}
.product_sort .bd .item .three a i{
width:31px;
height:23px;
background-position:0 -101px;
left:-34px;
top:-7px;
}
.product_sort .bd .item .four a i{
width:25px;
height:17px;
background-position:0 -156px;
left:-29px;
top:-3px;
}
.product_sort .bd .item .five a i{
width:28px;
height:17px;
background-position:0 -207px;
left:-33px;
top:-1px;
}
.product_sort .bd .item .six a i{
width:28px;
height:17px;
background-position:0 -259px;
left:-32px;
top:-3px;
}
.product_sort .bd .item .seven a i{
width:26px;
height:20px;
background-position:0 -309px;
left:-31px;
top:-6px;
}
.product_sort .bd .item .eight a i{
width:26px;
height:21px;
background-position:0 -360px;
left:-32px;
top:-7px;
}
.product_sort .bd .item .list{
width:210px;
padding-left:15px;
height:30px;
line-height:30px;
overflow:hidden;
}
.product_sort .bd .item .list a{
font-family:"微软雅黑";
color:#333;
}
.product_sort .bd .item .list a:hover{
text-decoration:underline;
}
.product_sort .bd .item .arrow{
font-family:"微软雅黑";
font-size:20px;
color:#c0d7f9;
position:absolute;
right:10px;
top:14px;
}
.product_sort .bd .item .line{
position:absolute;
right:-2px;
top:0px;
width:2px;
height:60px;
background-color:#fff;
z-index:95;
display:none;
}
.product_sort .bd .item .subitem{
display:none;
}
.product_sort .bd .layer .line{
display:block;
}
.product_sort .bd .layer .arrow{
display:none;
}
.product_sort .bd .layer .subitem{
width:731px;
background:#fff;
border:solid 1px #3299fd;
border-left:none;
font-family:"微软雅黑";
position:absolute;
left:227px;
_left:228px;
top:-15px;
z-index:95;
min-height:60px;
height:auto!important;
height:60px;
padding:5px 10px 15px 10px;
display:block;
}
.product_sort .bd .layer .subitem .inner .tit{
font-size:12px;
text-align:left;
border-top:1px dashed #d7d7d7;
padding:5px 0;
}
.product_sort .bd .layer .subitem .inner .tit1{
border-top:none;
}
.product_sort .bd .layer .subitem .inner .tit .name{
display:block;
width:90px;
color:#3299fd;
cursor:pointer;
float:left;
padding-top:3px;
}
.product_sort .bd .layer .subitem .inner ul{
overflow:hidden;
zoom:1;
display:block;
margin-left:90px;
width:630px;
}
.product_sort .bd .layer .subitem .inner ul li{
float:left;
padding:0 8px;
height:25px;
}
.product_sort .bd .layer .subitem .inner ul li a{
color:#222;
display:block;
}
.product_sort .bd .layer .subitem .inner ul li a:hover{
color:#3299fd;
text-decoration:underline;
}
CSS代码同样简洁明了，建议保存为index.css文件并在HTML中引入。上述已提供完整代码，复制并引入后即可运行该特效。
以上内容为本文的全部分享，希望对读者的学习有所帮助，也欢迎继续支持本站。
作者最新文章
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码：结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果？FLIP技术实战
2026-11-04 10:12:22