jQuery树形下拉菜单特效代码分享_jquery
- WBOY原创
- 2016-05-16 15:44:571140浏览
本文实例讲述了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树形下拉菜单代码，希望大家可以喜欢。
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn