Jquery和ajax开发案例之---弹出菜单

最新推荐文章于 2025-05-22 17:36:19 发布

zlcook

最新推荐文章于 2025-05-22 17:36:19 发布

阅读量916

点赞数

分类专栏： jquery ajax 前端框架 java 文章标签： ajax jquery 弹出菜单

本文链接：https://blog.youkuaiyun.com/zl594389970/article/details/24119695

版权

java 同时被 3 个专栏收录

7 篇文章

订阅专栏

jquery ajax

5 篇文章

订阅专栏

前端框架

5 篇文章

订阅专栏

案例(浮动窗口、动态股票信息、弹出菜单、可编辑的表格、自动补全输入框)下载地址：

http://download.youkuaiyun.com/detail/zl594389970/7218687

效果图：

html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>JQuery实例：弹出菜单</title>
		<script type="text/javascript"  src="js/jquery-1.3.1.js"></script> 
		<script type="text/javascript"  src="js/jquerymenu.js"> </script>
		<link rel="stylesheet" type="text/css" href="css/menu.css">
		
	</head>
	<body>
		
		<ul>
			<a href="#">菜单</a>
			<li><a href="#" id="JqueryWindow.html">菜单1</a></li>
			<li><a href="#" id="JqueryWindow.html">菜单1</a></li>
			<li><a href="#">菜单1</a></li>
			<li><a href="#">菜单1</a></li>
		</ul>
		<ul>
			<a href="#">菜单</a>
			<li><a href="#" id="second">菜单1</a></li>
			<li><a href="#">菜单1</a></li>
			<li><a href="#">菜单1</a></li>
			<li><a href="#">菜单1</a></li>
		</ul>
		<div id="content"></div>
	</body>
</html>

jquerymenu.js代码：

//页面装载是执行

$(document).ready(function () {
	//先找到所有的住菜单
	var uls = $("ul");
	//找到主菜单中的a节点
	var as = $("ul>a");
	//为所a注册单击事件
	as.click(function() {
		//找到当前被点击的a节点
		var aNode=$(this);
		//找到当前a节点的所有兄弟节点
		var lis = aNode.nextAll("li");/*
		//找到当前ul节点中所有li子节点
		var lis = ulNode.children("li");*/
		//显示和隐藏交替
		lis.toggle();
	});
	
	$("li>a").click(function() {
		//当点击a时将id中的页面加载到content中
		$("#content").load($(this).attr("id"));
	});
});

menu.css代码：

li{
	list-style-type : none;
	padding-left: 5px;
	display: none;
	text-decoration: none;
}
a{
	text-decoration: none;
}