html
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>itcast.cn的JQuery应用示例：弹出菜单</title> <link type="text/css" rel="stylesheet" href="../css/menu.css" /> <script type="text/javascript" src="../jslib/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="../jslib/jquerymenu.js"></script> </head> <body> <ul> <a href="#">我是菜单1</a> <li><a href="#">我是子菜单1</a></li> <li><a href="#">我是子菜单2</a></li> </ul> <ul> <a href="#">我是菜单2</a> <li><a href="#">我是子菜单3</a></li> <li><a href="#">我是子菜单4</a></li> </ul> </body> </html>
js
//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏 //需要编写代码，在页面装载时，给所有的主菜单添加onclick的事件 //保证主菜单点击时可以显示或隐藏子菜单 //注册页面装载时执行的方法 $(document).ready(function() { //这里需要首先找到所有的主菜单 //然后给所有的主菜单注册点击事件 //找到ul中的节点 var as = $("ul > a"); as.click(function() { //这里需要找到当前ul中的li，然后让li显示出来 //获取当前被点击的a节点 var aNode = $(this); //找到当前a节点的所有li兄弟字节点 var lis = aNode.nextAll("li"); //让子节点显示或隐藏 lis.toggle("show"); }); });
css
li { list-style: none; margin-left: 18px; display: none; } a{ text-decoration: none; }