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"); } ); } );
原文地址：https://www.jb51.cc/ajax/161707.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
