jQuery树形下拉菜单特效代码分享

本文实例讲述了jQuery实现幻树形下拉菜单特效，实现自动伸缩，分享给大家供大家参考。

运行jQuery树形下拉菜单特效效果图：

为大家分享的jQuery树形下拉菜单代码如下

<head>

<title>常用的jquery下拉菜单</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

$(document).ready(

function()

{

$(".menuTitle").click(function(){

$(this).next("div").slideToggle("slow")

.siblings(".menuContent:visible").slideUp("slow");

$(this).toggleClass("activeTitle");

$(this).siblings(".activeTitle").removeClass("activeTitle");

});

});

</script>

<style type="text/css">

body

{

margin:0;background-color:#9ad075;

}

.container

{

width:100%; text-align:center;

}

.menuTitle

{

width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;

}

.activeTitle

{

width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;

}

.menuContent

{

background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;

}

li

{

background:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px;

}

ul

{

margin:0;padding:0;

}

</style>

</head>

<body>

<div class="container">

<div class="menuTitle">

资源库

</div>

<div class="menuContent">

<ul>

<li> <a href="#">欢迎访问</a></li>

<li><a href="http://www.jb51.net/"> 脚本之家 </a></li>

<li><a href="http://www.jb51.net/list/index_1.htm"> 网络编程</a></li>

</ul>

</div>

<div class="menuTitle">

文章模块

</div>

<div class="menuContent">

<ul>

<li> <a href="#">前端技术</a></li>

<li> <a href="http://www.jb51.net/list/list_21_1.htm">ASP.NET</a></li>

<li> <a href="http://www.jb51.net/list/index_104.htm">数据库</a></li>

</ul>

</div>

<div class="menuTitle">

下载模块

</div>

<div class="menuContent">

<ul>

<li> <a href="http://www.jb51.net/">脚本之家 </a></li>

<li> <a href="http://www.jb51.net/codes/">源码下载</a></li>

<li> <a href="http://www.jb51.net/books/">电子书籍</a></li>

</ul>

</div>

</div>

</body>

</html>

以上就是为大家分享的jQuery树形下拉菜单代码，希望大家可以喜欢。