脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery下拉菜单

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中的deferred使用方法

    jQuery中的deferred使用方法

    deferred对象是jQuery的回调函数解决方案，jQuery之前的版本中异步回调这块做的不是很好，所以后期补上了该解决方案。接下来通过本文给大家介绍jQuery中的derferred使用方法，非常不错，需要的朋友参考下
    2017-03-03
  • jQuery获取多种input值的简单实现方法

    jQuery获取多种input值的简单实现方法

    下面小编就为大家带来一篇jQuery获取多种input值的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JSON+Jquery省市区三级联动

    JSON+Jquery省市区三级联动

    这篇文章主要介绍了JSON+Jquery省市区三级联动的相关资料,需要的朋友可以参考下
    2016-01-01
  • jquery.boxy插件的iframe扩展代码

    jquery.boxy插件的iframe扩展代码

    jquery.boxy插件的iframe扩展
    2010-07-07
  • jQuery 1.5最新版本的改进细节分析

    jQuery 1.5最新版本的改进细节分析

    jQuery 1.5 beta1出来了，从学习跟进上来说，这一次已经比较晚了（我竟然不知道1.5什么时候出的alpha，就这么beta了）。
    2011-01-01
  • jQuery实现的左右移动焦点图效果

    jQuery实现的左右移动焦点图效果

    这篇文章主要介绍了jQuery实现的左右移动焦点图效果,涉及jQuery结合时间函数响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
    2016-01-01
  • 基于jquery的划词搜索实现（备忘）

    基于jquery的划词搜索实现（备忘）

    最近，需要做个划词搜索功能。在网上找了好些，最后，参照进行修改，实现了想要的功能。这里，做个记录，以备日后所用。
    2010-09-09
  • jQuery之按钮组件的深入解析

    jQuery之按钮组件的深入解析

    本篇文章是对jQuery中的按钮组件进行了详细的分析介绍，需要的朋友参考下
    2013-06-06
  • jQuery侧边栏实现代码

    jQuery侧边栏实现代码

    本文给大家介绍jquery侧边栏实现代码，这些侧边栏菜单可以用在不同风格的网页上,如果你觉得不错,可以参考下本文实现代码
    2016-05-05
  • jQuery中select与datalist制作下拉菜单时的区别浅析

    jQuery中select与datalist制作下拉菜单时的区别浅析

    一般我们通常使用select制作下拉菜单，但是H5之后，datalist也可以充当select的角色，而且两者还有一点小的不同。具体区别详解小编通过本文给简单介绍下
    2016-12-12

最新评论