AJAX06
JQuery应用示例2：弹出菜单
<!DOCTYPE html> <html> <head> <title>JQuery应用示例2：弹出菜单</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <script src="//code.jquery.com/jquery-2.1.4.js"></script> <script src="js/jquerymenu.js"></script> <link type="text/css" rel="stylesheet" href="css/menu.css" /> </head> <body> <dl> <dt><a href="#">我是菜单1</a><dt> <dd><a href="#">我是子菜单1</a></dd> <dd><a href="#">我是子菜单2</a></dd> </dl> <dl> <dt><a href="#">我是菜单2</a></dt> <dd><a href="#">我是子菜单3</a></dd> <dd><a href="#">我是子菜单4</a></dd> </dl> </body> </html>
//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏
//需要编写代码，在页面装载时，给所有的主菜单添加onclick的事件
//保证主菜单点击时可以显示或隐藏子菜单
$(document).ready(function() {
var as = $("dt");
// var as = $("dl > dt");
as.click(function() {
var aNode = $(this);
var lis = aNode.nextAll("dd");
// 让子节点显示或隐藏
lis.toggle("show");
});
});
dd {
display: none; /*让所有的子菜单都先隐藏*/
}
a {
text-decoration: none; /*让链接的下划线消失*/
}