行使 JQuery 计划的树形二级菜单
发布时间：2018-08-18 10:18:18 所属栏目：业界 来源：站长网
导读：成果方针：列出二级菜单，点击某个菜单其他菜单均封锁，次菜单改变状态(即若为封锁则变为打开，若为打开则封锁)。 自我评价：写的有点儿低级，可是我们的方针是类型代码、更精简、更简朴。 HTML部门： Copy to Clipboard 引用的内容：[www.veryhuo.com]div
|
成果方针：列出二级菜单，点击某个菜单其他菜单均封锁，次菜单改变状态(即若为封锁则变为打开，若为打开则封锁)。 自我评价：写的有点儿低级，可是我们的方针是类型代码、更精简、更简朴。 HTML部门： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<div style="width: 100px;"> <div id="MM"> <a>第一个菜单</a> <div class="Menu"> <ul> <li>子菜单1</li> <li>子菜单1</li> </ul> </div> <a>第二个菜单</a> <div class="Menu"> <ul> <li>子菜单2</li> <li>子菜单2</li> </ul> </div> <a>第三个菜单</a> <div class="Menu"> <ul> <li>子菜单3</li> <li>子菜单3</li> <li>子菜单3</li> </ul> </div> </div> </div> JQuery代码： Copy to Clipboard引用的内容：[www.veryhuo.com]
<script type="text/javascript" src="http://www.veryhuo.com/uploads/Common/jquery-1.3.2.min.js"></script><script type="text/javascript"> $(document).ready(function() { $("a").click(function() { $(".Menu").not($(this).next(".Menu")).slideUp("fast");//撤除a的下一个div页面其他div变为潜匿。。。 $(this).next(".Menu").slideToggle("fast");//所选div改变表现状态 }); });//liehuo.net </script> Css代码： Copy to Clipboard引用的内容：[www.veryhuo.com]
<style type="text/css"> .Menu display: none;} </style> css只有一句，即首次加载时全部菜单封锁状态。 Jquery的选择器很是强盛，假如运用自如使其更好的共同定会大大镌汰代码量，使代码清楚简朴。 转自：http://www.cnblogs.com/ChaosHero/ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
