Jquery实例2：可收缩展开的级联菜单与局部刷新
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>
/*让所有li的小圆点都不显示，可以使用css的标签选择器*/li {/*让li前面的小圆点消失*/list-style: none;/*让子菜单向右移动一段距离，达到缩进的效果*/margin-left: 15px;/*让所有的子菜单都不显示*/display: none;}a {/*让链接的下划线消失*/text-decoration: none;}//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏//需要编写代码时，在页面加载时，让所有的主菜单添加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"));});});});