用jQuery实现三级下拉菜单

最新推荐文章于 2025-03-31 20:33:20 发布
转载 最新推荐文章于 2025-03-31 20:33:20 发布
· 5.4k 阅读 · 10

这篇文章是我借鉴别人文章的基础，自己练了一遍并加了一些自己的想法进去，现总结如下：

咱们先看一下设计图：

1,2,3是主菜单，点击1的时候出现1-1,1-2,1-3再次点击 1-2的时候出现1-2-1,1-2-......功能以此类推

这就是功能展示，那么我们如何通过jQuery来实现呢？

思路：

  1. 先用ul列表来布局，并且刚开始的时候下拉菜单都是隐藏状态的显然有用到一个关键的css属性：display：none;
  2. 菜单1,2,3点击的时候能变色，而且相应的下拉菜单会显示（一级菜单能点击-能变色-能下拉）
  3. 以1-1，1-2,1-3这个下拉菜单为例，划过每一个会相应的变色并且当划过每一个菜单的时候会出现例如1-2-1,1-2-2,1-2-3,1-2-4的情况（二级菜单能点击-能变色-能下拉）
  4. 鼠标划过1-2-1,1-2-2,1-2-3,1-2-4时也会出现相应的变色（三级菜单能变色）
  5. 以此类推三级菜单能点击-能变色-能下拉，四级能，五级.......

大体功能分析完毕下面展示我所写的代码：

我的css代码：

*,
::before,
::after {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  line-height: 100px;
}
.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
  clear: both;
}
.tx {
  text-align: center;
}
.active {
  background: black!important;
}
ul > li.on > ul {
  display: block;
}
.menu {
  width: 300px;
  height: 100px;
}
.menu > li {
  width: 100px;
  height: 100px;
  float: left;
}
.menu > li > a {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffa500;
  font-size: 20px;
  text-align: center;
}
.menu > li > ul {
  display: none;
}
.menu > li > ul > li {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
}
.menu > li > ul > li > a {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffa500;
  font-size: 20px;
  text-align: center;
}
.menu > li > ul > li > ul {
  position: absolute;
  left: 100px;
  top: 0;
}
.menu > li > ul > li > ul li {
  width: 100px;
  height: 100px;
  float: left;
}
.menu > li > ul > li > ul li a {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffa500;
  font-size: 20px;
  color: red;
  text-align: center;
}
我的html 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/menu.css"/>
	</head>
	<body>
		<ul class="menu clearfix">
			<li><a href="javascript:;">1</a>
				<ul>
					<li><a href="javascript:;">1-1</a>
						<ul class="clearfix">
							<li><a href="javascript:;">1-1-1</a></li>
							<li><a href="javascript:;">1-1-2</a></li>
							<li><a href="javascript:;">1-1-3</a></li>
						</ul>
					</li>
					<li><a href="javascript:;">1-2</a>
						<ul class="clearfix">
							<li><a href="javascript:;">1-2-1</a></li>
							<li><a href="javascript:;">1-2-2</a></li>
							<li><a href="javascript:;">1-2-3</a></li>
						</ul>
					</li>
					<li><a href="javascript:;">1-3</a>
						<ul class="clearfix">
							<li><a href="javascript:;">1-3-1</a></li>
							<li><a href="javascript:;">1-3-2</a></li>
							<li><a href="javascript:;">1-3-3</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<!--以下两个不再重复-->
			<li><a href="javascript:;">2</a>
				<ul>
					<li><a href="javascript:;">1-1</a>
						<ul class="clearfix">
							<li><a href="javascript:;">2-1-1</a></li>
							<li><a href="javascript:;">2-1-2</a></li>
							<li><a href="javascript:;">1-1-3</a></li>
						</ul>
					</li>
					<li><a href="javascript:;">1-2</a>
						<ul class="clearfix">
							<li><a href="javascript:;">1-2-1</a></li>
							<li><a href="javascript:;">1-2-2</a></li>
							<li><a href="javascript:;">1-2-3</a></li>
						</ul>
					</li>
					<li><a href="javascript:;">1-3</a>
						<ul class="clearfix">
							<li><a href="javascript:;">1-3-1</a></li>
							<li><a href="javascript:;">1-3-2</a></li>
							<li><a href="javascript:;">1-3-3</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="javascript:;">3</a>
				<ul>
					<li><a href="javascript:;">1-1</a>
						<ul class="clearfix">
							<li><a href="javascript:;">1-1-1</a></li>
							<li><a href="javascript:;">1-1-2</a></li>
							<li><a href="javascript:;">1-1-3</a></li>
						</ul>
					</li>
					<li><a href="javascript:;">1-2</a>
						<ul class="clearfix">
							<li><a href="javascript:;">1-2-1</a></li>
							<li><a href="javascript:;">1-2-2</a></li>
							<li><a href="javascript:;">1-2-3</a></li>
						</ul>
					</li>
					<li><a href="javascript:;">1-3</a>
						<ul class="clearfix">
							<li><a href="javascript:;">1-3-1</a></li>
							<li><a href="javascript:;">1-3-2</a></li>
							<li><a href="javascript:;">1-3-3</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</body>
	<script type="text/javascript" src="js/jquery.js">		
	</script>
	<script type="text/javascript" src="js/menu.js">		
	</script>
</html>

我的js文件 

$(document).ready(function(){
//	当鼠标悬浮的时候给所有的添加背景色
	$(".menu li a").hover(function(){
		$(this).addClass("active");
//		a标签的兄弟元素ul的css样式如果是display：none;就让其的slidedown
		if($(this).siblings("ul").css("display") == "none"){
			$(this).siblings("ul").slideDown(300);
			if($(this).parent("li").siblings("li").children("ul").css("display") == "block"){
				console.log(1)
				$(this).parent("li").siblings("li").children("ul").css("display","none");
			}else{
				 //控制自身菜单下子菜单隐藏
//			     $(this).siblings('ul').slideUp(200);
			     //控制自身菜单下子菜单隐藏
			     $(this).siblings('ul').children('li').children('ul').slideUp(200);
			}
		}		
	},function(){
		$(this).removeClass("active");
		$(this).parent("li").siblings("li").children("ul").css("display","none");
	})
})

以上内容出现了bug而且我跳入其中根本不知道自己错在了哪里，好悲剧

下面网上资源正确的两种写法:

1.简洁的写法

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery三级下拉列表导航菜单</title>
 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
 
<style type="text/css">
*{margin: 0; padding: 0;}
body{ font-size: 12px; }
li{ list-style: none;}
ul.nav li{ width: 200px; text-align:center;}
ul.nav > li{ float: left; margin-right:10px;}
ul.nav li h3{height: 40px; line-height: 40px;}
ul.nav > li > h3{ background: #72a7ff;}
ul.nav > li > ul > li h3{ background: #ffd9d9;}
ul.nav > li h3:hover,.choice{ background: #ffc0c0!important;}
ul > li > ul{ display: none;}
ul > li.on > ul{ display: block;}
ul.nav li{ position: relative;}
ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;}
ul.nav span.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(images/arrows.png) no-repeat center center;}
</style>
 
<script type="text/javascript">
 $(document).ready(function() {
 $("ul.nav li").hover(function(){
  $(this).addClass("on");
 
 },
 function(){
  $(this).removeClass("on");
 
 })
 });
 
 $(document).ready(function() {
 $("ul.nav li").hover(function(){
  $(this).parent("ul").siblings("h3").addClass("choice");
 
 },
 function(){
  $(this).parent("ul").siblings("h3").removeClass("choice");
 })
 });
 
 $(document).ready(function() { 
  if ($("ul.nav li").find("ul") .html()!="") {
  $("ul.nav li").parent("ul").siblings("h3").append("<span class='sub'></span>");  
  }
 });
</script>
 
 
</head>
<body>
<ul class="nav">
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3>
  <ul>
  <li><h3>4级分类</h3>
   <ul>
   <li><h3>5级分类</h3></li>
   <li><h3>5级分类</h3></li>
   <li><h3>5级分类</h3></li>
   <li><h3>5级分类</h3></li>
   </ul>
  </li>
  <li><h3>4级分类</h3></li>
  <li><h3>4级分类</h3></li>
  <li><h3>4级分类</h3></li>
  </ul>
  </li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 </ul>
 </li>
 <li><h3>我的网站</h3>
 <ul>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 <li><h3>2级分类</h3>
  <ul>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  <li><h3>3级分类</h3></li>
  </ul>
 </li>
 </ul>
 </li>
</ul>
 
</body>
</html>

2.复杂的写法 
<body>
 <aside>
  <ul class="one">
   <li> <a href="#" class="a">目录A</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录B</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录C</a> </li>
  </ul>
 </aside>
 
//jQuery部分
<script src="js/jquery-1.8.3.min.js"></script>
<script>
  $(document).ready(function() {
   $('.a').click(function() {
    if ($(this).siblings('ul').css('display') == 'none') {
     $(this).siblings('ul').slideDown(100).children('li');
     if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
      $(this).parents('li').siblings('li').children('ul').slideUp(100);
 
     }
    } else {
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').slideUp(100);
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').children('li').children('ul').slideUp(100);
    }
   });
 });
</script>
</body>

我还要继续研究是怎么错的，脑袋都大了！！！

jQuery三级下拉导航菜单
09-10
jQuery三级下拉导航菜单，是一个菜单的三级下拉，对于新手来说是非常好的学习wed前端的源码
基于jquery实现三级下拉菜单
10-22
本篇将详细介绍如何使用 jQuery 实现一个三级下拉菜单。 首先，我们需要构建 HTML 结构。一个典型的三级下拉菜单由多个嵌套的 `<ul>` 和 `<li>` 元素组成。每个一级菜单项包含一个二级菜单，二级菜单中则可能包含三...
jQuery三级下拉菜单
weixin_30954265的博客
12-03 145
演示地址:http://www.corange.cn/demo/3738/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/...
JS实现下拉菜单
最新发布
2403_88500789的博客
03-31 168
【代码】JS实现下拉菜单。
jquery实现三级下拉菜单(三种方法) 折叠菜单
sinat_51673411的博客
03-02 1978
<!doctype html> <html> <head> <meta charset="utf-8"> <title>折叠菜单</title> <style type="text/css"> ul, li { margin: 0; padding: 0 } body {
jQuery实现三级菜单
XDarker的博客
05-25 2638
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
jQuery自定义三级菜单
Hellos_Worlds的博客
01-20 326
注:只需引用jquery-1.8.2.min.js脚本即可(版本无规定) css样式: body, div, ul, li { margin: 0; padding: 0; font-family: "Microsoft YaHei" ! important; font-size: 13px; } div, ul, li { list-style-type: none; } .oneUl { height: 35px; line-heigh.
jQuery网站三级下拉菜单
04-06
在本教程中，我们将探讨如何利用jQuery实现一款功能丰富的三级下拉菜单，即"jQuery网站三级下拉菜单"。这个插件，名为"slide down menu"，旨在提供用户友好的导航体验，尤其适用于内容层次结构复杂的网站。 首先，...
jquery实现三级下拉菜单实例
08-04
本实例主要讲解如何使用jQuery库来创建一个兼容各浏览器、小巧实用的三级下拉菜单。jQuery以其简洁的API和强大的功能，成为JavaScript开发中的首选库，它能轻松实现复杂的DOM操作和动画效果。 首先，我们需要理解...
jQuery绿色三级下拉菜单全屏导航栏.zip
06-07
总结来说，“jQuery绿色三级下拉菜单全屏导航栏”是一个集实用性和美观性于一体的前端设计案例，它展示了如何利用jQuery、CSS3、JavaScript和ECMAScript等技术实现高效的网页导航功能。通过学习和研究这个项目，...
php+jQuery实现的三级导航栏下拉菜单显示效果
10-19
本实例通过结合PHP和jQuery，展示了如何实现一个三级导航栏下拉菜单，从而为用户提供更直观的浏览体验。以下是这个实现过程中的关键知识点： **1. PHP数组遍历：** 在`db.php`文件中，我们看到数据被存储在一个多维...
jQuery三级下拉列表导航菜单.zip
05-25
jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js，可无限极分类，可智能判断是否有下级菜单，鼠标经过上次菜单显示下级菜单。
jQuery 通用三级下拉联动菜单插件增强版
05-12
内容索引:脚本资源,jQuery,下拉菜单,三级联动　　用Jquery实现的三级联动下拉列表插件，压缩包内有多个不同的版本，其实现的基本原理大同小异，无非是调用方式的不同，第一个是通过读取XML构建，支持IE/firefox，chrome不支持，XML部分可以改成AJAX的方式，这样chrome支持就不成问题；第二个是采用Json数据格式构建，是第二次尝试改进；第三个与第二个其实是一样的，只不过将数据分离到JS文件中，代码中的ASP文件，是调用数据库生成Json省市区数据的，如果页面直接调用ASP文件，速度会很慢，生成JS文件后直接调用就要快的多，而且这部分数据一般不会改动。
jquery省市区三级联动下拉菜单_select三级联动下拉菜单
11-11
jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单
jQuery 三级下拉横向菜单 动画效果.rar
07-09
jquery三级动画展开的菜单，国外网站获得的作品，兼容性表现不错，尤其是通过jQeury生成动画的部分，很值得使用jquery库进行编程的朋友们学习，运行效果如上所示，我很喜欢的一种菜单风格。
jQuery导航条三级下拉菜单代码.zip
07-18
jQuery导航条三级下拉菜单代码（2），jQuery导航条三级下拉菜单代码（2）
使用JQuery实现漂亮的三级级联下拉框
热门推荐
xinyangwl的专栏
04-02 1万+
/** * 使用标题可下载本Demo * 需要使用json.jar包 * 使用JQuery实现漂亮的三级级联下拉框 *///-----------------------------------------------jsp-----------------------------------------------       String path = re
实现交互式三级下拉菜单的完整jQuery导航条代码
weixin_29940495的博客
10-31 926
本文还有配套的精品资源，点击获取 简介：本教程介绍如何使用jQuery创建三级下拉菜单的导航条。首先概述了jQuery库的核心优势，然后提供了三级下拉菜单的基本HTML结构，并详细介绍了如何利用jQuery和CSS实现交互效果。教程中还包含了一系列优化措施，如触摸支持和响应式设计，以提升用户体验。学习这个教程将帮助开发者掌握在网页设计中创建交互式导航条的技巧。 1...
Jquery 实现下拉列表三级联动
分享我的点点滴滴，在成长路上与你同行！
01-15 2098
 需求:    (1)  根据 省、获得市、               (2)  通过市，再获得到县，               (3)  每个下拉框数据都由一个数组组成;   效果： 初始页面 加载省份 通过选择省份，获得对应的市 再通过市，获得对应的区 HMTL代码： &lt;body&gt; 省份：&lt;select id="selProvin...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值