《JavaWeb-JQuery兑现可收缩的级联菜单》 _Web前端

《JavaWeb---JQuery实现可收缩的级联菜单》

<!DOCTYPE html>
<html>
  <head>
    <title>可收缩的菜单</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/menu.js"></script>
	<link rel="stylesheet" type="text/css" href="css/menu.css">
  </head>
  
  <body>
    <ul><a href="javascript:void(0)">主菜单1</a>
    	<li>子菜单</li>
    	<li>子菜单</li>
    	<li>子菜单</li>
    </ul>
    <ul><a href="javascript:void(0)">主菜单2</a>
    	<li>子菜单</li>
    	<li>子菜单</li>
    	<li>子菜单</li>
    </ul>
  </body>
</html>

CSS代码

li{
	list-style: none;
	margin-left: 18px;
	display: none;
	}
<!--去掉a标签默认的超链接样式-->
a:link { 
	text-decoration:none; 
	} 
a:visited { 
	color: #0066CC;
	text-decoration:none; 
} 
a:active {
	color: #0066CC; 
	text-decoration:none; 
	}

JS代码

//利用JQuery，当页面加载时注册执行的函数
$(document).ready(function(){
	
	//给a标签注册点击事件
	$("a").click( function () {
		//获取与a标签等级的所有li标签
		var lis = $(this).nextAll("li"); 
		
		//切换li标签的显示样式
		lis.toggle("slow");
		});
});