JQuery学习笔记之实现菜单的下拉

最新推荐文章于 2023-02-23 21:39:11 发布

乔不思

最新推荐文章于 2023-02-23 21:39:11 发布

阅读量1k

点赞数

分类专栏： JQuery 文章标签： jquery js 下拉菜单

本文链接：https://blog.csdn.net/qiaoge134/article/details/16870799

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现的效果如图所示：点击“菜单一”，出现“子菜单一，子菜单二” 点击“菜单二”，出现“子菜单一，子菜单二”，

js相关的代码：

$(document).ready(function(){
	var as=$("ul > a");
	//当a标签被点击时候调用
	as.click(function(){
		var Node=$(this);
		var lis=Node.nextAll("li");
		lis.toggle("show");
		
	});
	//点击二级菜单出现的效果
	$("li > a").click(function(){
		//alert("..");
		//通过Id把相应的id值所对应的页面load到div中。div的id为content
		$("#content").load($(this).attr("id"));
	});
	
});

css相关的代码：

li{
	list-style: none;
	margin-left: 30px;
	display: none;
}
a{
	text-decoration: none;
}

相关的jsp文件：

<link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
  <script type="text/javascript" src="js/check.js"></script>
  
  <body>  
		<ul><a href="#" >菜单一</a>
			<li><a href="#" >子菜单一</a></li>
			<li><a href="#" >子菜单二</a></li>
		</ul>
		<ul><a href="#">菜单二</a>
			<li> <a href="#" >子菜单一</a></li>
			<li> <a href="#" >子菜单二</a></li>
		</ul>
		<div id="content"></div>
		
  </body>

这里用到的是