html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>应用实例弹出菜单</title>
<script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
<script type="text/javascript" src="jslib/jquerymenu.js"></script>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul >
<a href="#">菜单1</a>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
<ul >
<a href="#">菜单2</a>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</body>
</html>
css:
/*使用标签选择器进行缩进*/
li{
list-style:none;
margin-left: 18px;
display: none;
}
a{
text-decoration: none;
}
javascript:
//按主菜单子菜单会显示或者消失
//在页面装载的时候给所有的主菜单进行onclick事件
//注册页面在装载的时候执行的方法
$(document).ready( function(){
//先找所有的主菜单,然后给他们进行点击事件
var as = $("ul").children("a");
//或者是var uls = $("ul > a");
as.click(
function(){
var aNode = $(this);
//找到相应的兄弟节点
var lis = aNode.nextAll("li");
//切换菜单当前的状态toggle
lis.toggle("show");
}
);
} );