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

更新时间：2015年08月15日 15:38:31 投稿：lijiao

这篇文章主要介绍了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="https://www.jb51.net/"> 脚本之家 </a></li>
  <li><a href="https://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="https://www.jb51.net/list/list_21_1.htm">ASP.NET</a></li>
  <li> <a href="https://www.jb51.net/list/index_104.htm">数据库</a></li>
 </ul>
 </div>
 <div class="menuTitle">
 下载模块
 </div>
 <div class="menuContent">
 <ul>
  <li> <a href="https://www.jb51.net/">脚本之家 </a></li>
  <li> <a href="https://www.jb51.net/codes/">源码下载</a></li>
  <li> <a href="https://www.jb51.net/books/">电子书籍</a></li>
 </ul>
 </div>
</div>


</body>
</html>

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

您可能感兴趣的文章:

基于jquery实现人物头像跟随鼠标转动
一款非常乖巧的人物头像跟随鼠标转动效果，在浏览器屏幕内，人物脸庞始终面向鼠标转动，本篇文章给大家介绍基于jquery实现人物头像跟随鼠标转动，有需要的朋友可以参考下
2015-08-08
jQuery插件开发基础简单介绍
jquery插件开发基础：开发jQuery 插件的基本格式,开发全局函数的基本格式，接下来为您详细介绍，感兴趣的朋友可以了解哦
2013-01-01
jQuery事件绑定方法学习总结(推荐)
下面小编就为大家带来一篇jQuery事件绑定方法学习总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
基于jquery的地址栏射击游戏代码
地址栏射击游戏!对，你没看错，就是在地址栏上玩的游戏，有图有真相！之前在网上看到这个小游戏，可惜在墙外，中午研究了一下，搬到国内来了，看看吧！
2011-03-03
jQuery的Cookie封装,与PHP交互的简单实现
下面小编就为大家带来一篇jQuery的Cookie封装,与PHP交互的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
Jquery日期选择datepicker插件用法实例分析
这篇文章主要介绍了Jquery日期选择datepicker插件用法,实例分析了datepicker插件的相关使用技巧,需要的朋友可以参考下
2015-06-06
jquery三大不同版本之间区别专家讲解
jQuery是一个快速、简洁的JavaScript框架,目前jQuery有1.x、2.x、3.x三个版本,在jQuery官网（http://jquery.com/）可以查看,2.x、3.x不是 1.x 的后续或者升级版本,他们是同时更新迭代的,现在使用最广的版本都是1.x的
2023-09-09
基于jQuery的图片剪切插件
网页应用程序需要对丰富的内容提供简单易用的上传和操作方式，但是这样会给只有少数图片处理技能的用户造成很大的困难。图片剪切是最基本的图片处理技术，这个详细的教程将包括在jQuery库上创建此参加的每一个步骤。
2011-08-08
jQuery实现点击下拉框中的值累加到文本框中的方法示例
这篇文章主要介绍了jQuery实现点击下拉框中的值累加到文本框中的方法,涉及jQuery事件绑定及页面元素属性动态获取与操作相关实现技巧,需要的朋友可以参考下
2017-10-10
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
这篇文章主要介绍了JSON中key动态设置及JSON.parse和JSON.stringify()的区别讲解，非常不错，具有参考借鉴价值，需要的朋友参考下
2016-12-12