使用 JQuery 设计的树形二级菜单
发布时间：2018-08-18 06:07:59 所属栏目：传媒 来源：站长网
导读：功能目标：列出二级菜单，点击某个菜单其他菜单均关闭，次菜单改变状态(即若为关闭则变为打开，若为打开则关闭)。 自我评价：写的有点儿初级，但是我们的目标是规范代码、更精简、更简单。 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/ （编辑：好传媒网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
