Jquery实例2：可收缩展开的级联菜单与局部刷新-优快云博客

本文链接：https://blog.youkuaiyun.com/mr_cheney/article/details/83671144

本文介绍了一个基于JQuery的菜单插件实现方法，通过HTML、CSS和JavaScript代码展示了如何创建一个可展开和折叠的菜单系统。该插件能够响应用户的点击事件来显示或隐藏子菜单，并且支持局部页面刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html部分：

JqueryMenu.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源代码：

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

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

3.JavaScript代码：

menu.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"));
		});
	});
});