//页面装载时给所有的主菜单添加onclick事件 //注册页面装载时执行的方法 /*
$(document).ready(function()
{
//首先需要找到所有的主菜单
//然后给所有的主菜单添加onClick事件
var uls = $("ul");//找标签不需要#
uls.click(function()
{
//这里需要找到当前的ul中的li,然后让li显示出来
//获取当前被点击ul节点
var ulNode = $(this);
//找到当前ul节点的所有li子节点
var lis = ulNode.children("li");
//让子节点显示或影藏
lis.toggle("show");
});
});
*/
$(document).ready(function() { //首先需要找到所有的主菜单 //然后给所有的主菜单添加onClick事件 //var as = $("ul").children("a");//找标签不需要# var as = $("ul > a");
as.click(function() { //这里需要找到当前的ul中的li,然后让li显示出来 //获取当前被点击ul节点里的a节点 var aNode = $(this); //找到当前ul节点的所有li兄弟节点 var lis = aNode.nextAll("li"); //让子节点显示或影藏
lis.toggle("show"); });
$("li > a").click(function() {
$("#content").load($(this).attr("id")); }); });
css:
/*标签选择器*/ li { /*li前面的小圆点消失*/
list-style:none; /*利用外边距达到缩进的效果*/ margin-left: 18px; display:none;
} a { text-decoration:none;/*让连接的下划线消失*/ }
html:
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>弹出菜单</title>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3"> <meta http-equiv="description"content="this is my page"> <meta http-equiv="content-type"content="text/html; charset=UTF-8">
