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