程序员人生 网站导航

使用 JQuery 设计的树形二级菜单

栏目:jquery时间:2014-01-04 10:30:23

功能目标:列出二级菜单,点击某个菜单其他菜单均关闭,次菜单改变状态(即若为关闭则变为打开,若为打开则关闭)。

自我评价:写的有点儿初级,但是我们的目标是规范代码、更精简、更简单。

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/

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐