使用 JQuery 设计的树形二级菜单
来源：程序员人生 发布时间：2014-01-04 10:30:23 阅读次数：3263次
功能目标：列出二级菜单，点击某个菜单其他菜单均关闭，次菜单改变状态(即若为关闭则变为打开，若为打开则关闭)。
自我评价：写的有点儿初级，但是我们的目标是规范代码、更精简、更简单。
HTML部分：
<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代码：
<script type="text/javascript" src="http://www.wfuyu.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代码：
<style type="text/css">
.Menu display: none;}
</style>
css只有一句，即初次加载时所有菜单关闭状态。
Jquery的选择器非常强大，如果运用自如使其更好的配合定会大大减少代码量，使代码清晰简单。
转自：http://www.cnblogs.com/ChaosHero/
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
