Jquery实例2：可收缩展开的级联菜单与局部刷新

最新推荐文章于 2021-06-03 08:44:07 发布

roger_lmj

最新推荐文章于 2021-06-03 08:44:07 发布

阅读量1.4k

点赞数

分类专栏： JS/Ajax/Jquery/as 文章标签： jquery function stylesheet html 体育 css

JS/Ajax/Jquery/as 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

.html部分：

JqueryMenu.html源代码：

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html >
< head >
< title > Jquery 实例2:弹出菜单</ title >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link href ="css/menu.css" rel ="stylesheet" type ="text/css" />
< script type ="text/javascript" src ="js/ jquery -1.3.2.js" > </ script >
< script type ="text/javascript" src ="js/menu.js" > </ script >
</ head >
< body >
< ul >
< a href ="#" > 诗歌</ a >
< li > < a href ="#" id ="a.html" > 乡愁(余光中)</ a > </ li >
< li > < a href ="#" id ="b.html" > 赋得古原草送别(白居易)</ a > </ li >
</ ul >
< ul >
< a href ="#" > 技术</ a >
< li > < a href ="#" > Flex/AIR</ a > </ li >
< li > < a href ="#" > Silverlight</ a > </ li >
</ ul >
< ul >
< a href ="#" > 体育</ a >
< li > < a href ="#" id ="a.html" > 足球(欧洲风云)</ a > </ li >
< li > < a href ="#" id ="b.html" > 篮球(NBA战火)</ a > </ li >
</ ul >
< div id ="content" > </ div >
</ body >
</ html >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Jquery

实例2:弹出菜单</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link href="css/menu.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery

-1.3.2.js"></script>
		<script type="text/javascript" src="js/menu.js"></script>
	</head>

	<body>
		<ul>
			<a href="#">诗歌</a>
			<li><a href="#" id="a.html">乡愁(余光中)</a></li>
			<li><a href="#" id="b.html">赋得古原草送别(白居易)</a></li>
		</ul>
		<ul>
			<a href="#">技术</a>
			<li><a href="#">Flex/AIR</a></li>
			<li><a href="#">Silverlight</a></li>			
		</ul>
		<ul>
			<a href="#">体育</a>
			<li><a href="#" id="a.html">足球(欧洲风云)</a></li>
			<li><a href="#" id="b.html">篮球(NBA战火)</a></li>
		</ul>
		<div id="content"></div>
	</body>
</html>

2.css代码

menu.js源代码：

Js代码

/*让所有li的小圆点都不显示，可以使用css的标签选择器*/
li {
/*让li前面的小圆点消失*/
list-style: none;
/*让子菜单向右移动一段距离，达到缩进的效果*/
margin-left: 15px;
/*让所有的子菜单都不显示*/
display: none;
}
a {
/*让链接的下划线消失*/
text-decoration: none;
}

/*让所有li的小圆点都不显示，可以使用css的标签选择器*/
li {
	/*让li前面的小圆点消失*/
	list-style: none;
	/*让子菜单向右移动一段距离，达到缩进的效果*/
	margin-left: 15px;
	/*让所有的子菜单都不显示*/
	display: none;
}

a {
	/*让链接的下划线消失*/
	text-decoration: none;
}

3.JavaScript代码：

menu.js源代码：

Js代码

//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏
//需要编写代码时，在页面加载时，让所有的主菜单添加onclick事件
//保证主菜单点击时可以显示或者隐藏子菜单
//注册页面装载时执行的方法
$(document).ready(function () {
//这里首先需要找到所有的主菜单
//然后给所有的主菜单注册点击事件
var as = $("ul > a" );
as.click(function () {
//这里需要找到当前的ul中的li,然后让li显示出来
//获取当前被点击的ul节点
var ulNode = $(this );
//找到当前a节点的所有li兄弟子结点
var lis = ulNode.nextAll("li" );
//让子菜单显示或隐藏
lis.toggle("slow" );
//局部刷新
$("li > a" ).click(function () {
$("#content" ).load($(this ).attr("id" ));
});
});
});

//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏

//需要编写代码时，在页面加载时，让所有的主菜单添加onclick事件
//保证主菜单点击时可以显示或者隐藏子菜单

//注册页面装载时执行的方法
$(document).ready(function() {
	//这里首先需要找到所有的主菜单
	//然后给所有的主菜单注册点击事件
	
	var as = $("ul > a");
	as.click(function() {
		//这里需要找到当前的ul中的li,然后让li显示出来
		//获取当前被点击的ul节点
		var ulNode = $(this);
		//找到当前a节点的所有li兄弟子结点
		var lis = ulNode.nextAll("li");
		//让子菜单显示或隐藏
		lis.toggle("slow");
		//局部刷新
		$("li > a").click(function() {
			$("#content").load($(this).attr("id"));
		});
	});
});

ok,代码已经贴完，现在我们看一看效果图吧。