13-JQuery可收缩展开的级联菜单与局部刷新..docVIP

JQueryMenu.html：!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN??????? /TR/html4/loose.dtdhtmlheadtitle的JQuery应用示例：弹出菜单/titlelink type=text/css rel=stylesheet href=css/menu.css /script type=text/javascript src=jslib/jquery.js/scriptscript type=text/javascript src=jslib/jquerymenu.js/script /headbody??? ul??????? a href=#我是菜单1/a??????? lia href=# id=page1.html我是子菜单1/a/li??????? lia href=# id=page2.html我是子菜单2/a/li??? /ul??? ul??????? a href=#我是菜单2/a??????? lia href=#我是子菜单3/a/li??????? lia href=#我是子菜单4/a/li??? /ul??? div id=content/div/body/html css/menu.css：/*如何让所有的li都不显示小圆点，可以使用css的标签选择器*/li {??? list-style: none; /*使li前面的小圆点消失*/??? margin-left: 18px; /*让子菜单向右移动一段距离，达到缩进的效果*/??? display: none; /*让所有的子菜单都先隐藏*/ } a{text-decoration: none; /*让链接的下划线消失*/} jquerymenu.js：//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏 //需要编写代码，在页面装载时，给所有的主菜单添加onclick的事件//保证主菜单点击时可以显示或隐藏子菜单 //注册页面装载时执行的方法$(document).ready(function() {??? //这里需要首先找到所有的主菜单??? //然后给所有的主菜单注册点击事件??? //找到ul中的节点??? var as = $(ul a); // 等价于：var as = $(ul).children(a);??? as.click(function() {??????? //这里需要找到当前ul中的li，然后让li显示出来??????? //获取当前被点击的a节点??????? var aNode = $(this);??????? //找到当前a节点的所有li兄弟字节点??????? var lis = aNode.nextAll(li);??????? //让子节点显示或隐藏，显示或隐藏的过程是有动画效果的??????? lis.toggle(show);??? });??? $(li a).click( function() {??????? $(#content).load($this).attr(id));??? });});