首先添加js文件和css文件 <LINK REL=stylesheet HREF="css/styles.css" mce_HREF="css/styles.css" type="text/css"> <mce:script type="text/javascript" src="jslib/jquery-1.5.js" mce_src="jslib/jquery-1.5.js"></mce:script> <mce:script type="text/javascript" src="jslib/minute.js" mce_src="jslib/minute.js"></mce:script> 页面中的内容 <body> <!-- 一般的在页面中 菜单列表都是用ul和li来实现的--> <ul> <a href="#" mce_href="#">我是菜单一</a> <!-- id:可以在这里给它指定连接页面 --> <li><a href="#" mce_href="#" id="success.jsp">one</a></li> <li><a href="#" mce_href="#" id="success1.jsp">two</a></li> </ul> <ul> <a href="#" mce_href="#">我是菜单二</a> <li><a href="#" mce_href="#">one</a></li> <li><a href="#" mce_href="#">two</a></li> </ul> <ul> <a href="#" mce_href="#">我是菜单三</a> <li><a href="#" mce_href="#">one</a></li> <li><a href="#" mce_href="#">two</a></li> </ul> <!-- 定义节点使显示的页面可以异步刷新显示到这里 --> <div id="content"></div> </body> js文件中的内容 //单击主菜单子菜单显示出来,然后点击主菜单子菜单隐藏起来 //给所有的主菜单添加onclick事件,并且是在加载页面的同时都给他们加载好这些事件 //注册页面装载是执行的方法 $(document).ready(function(){ //这里需要找到所有的主菜单 //找到ul中的a节点 var as = $("ul > a"); //然后给所有的主菜单注册---点击事件 as.click(function(){ //这里需要找到ul中的li,让li显示出来 //获得当前被点击的a节点 var aNode = $(this); //找到当前所有a节点的所有li兄弟节点 var lis = aNode.nextAll("li"); //让li节点显示或隐藏 lis.toggle("show"); }) //子菜单点击时我需要他装载一个页面 $("li > a").click(function (){ //获得节点,得到本地的id值,然后连接到页面。显示到节点位置就好了... $("#content").load($(this).attr("id")); }) }); css文件中的内容 li{ list-style: none; /*让li没有那个小圆点*/ margin-left: 5px; /*让子菜单向右移动5个像素*/ display: none; /*所有子菜单都隐藏*/ }