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"); } ); } );
