软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > jQuery > 使用 JQuery 设计的树形二级菜单

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

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

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

HTML部分:

Copy to ClipboardLiehuo.Net Codes引用的内容:[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 ClipboardLiehuo.Net Codes引用的内容:[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 ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<style type="text/css">
.Menu display: none;}
</style>

css只有一句,即初次加载时所有菜单关闭状态。

Jquery的选择器非常强大,如果运用自如使其更好的配合定会大大减少代码量,使代码清晰简单。

转自:http://www.cnblogs.com/ChaosHero/

    相关阅读
    网友评论
    栏目导航
    推荐软件