jquery+CSS实现的多级竖向展开树形TRee菜单效果

更新时间：2015年08月24日 15:36:39 作者：企鹅

这篇文章主要介绍了jquery+CSS实现的多级竖向展开树形TRee菜单效果,通过jquery自定义函数设置相应参数实现属性TRee菜单效果的功能,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果。分享给大家供大家参考。具体如下：

这里演示垂直的树形菜单，应用CSS和jquery技术来实现，显示在网页左侧比较合适，考虑到简洁，没有使用图片之类的作修饰。本效果兼容IE、火狐等主流浏览器。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery多级层叠树形菜单效果</title>
<style>
.topnav {
 width: 213px;
 padding: 40px 28px 25px 0;
 font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
ul.topnav {
 padding: 0;
 margin: 0;
 font-size: 1em;
 line-height: 0.5em;
 list-style: none;
}
ul.topnav li {}
ul.topnav li a {
 line-height: 10px;
 font-size: 11px;
 padding: 10px 5px;
 color: #000;
 display: block;
 text-decoration: none;
 font-weight: bolder;
}
ul.topnav li a:hover {
 background-color:#675C7C;
 color:white;
}
ul.topnav ul {
 margin: 0;
 padding: 0;
 display: none;
}
ul.topnav ul li {
 margin: 0;
 padding: 0;
 clear: both;
}
ul.topnav ul li a {
 padding-left: 20px;
 font-size: 10px;
 font-weight: normal;
 outline:0;
}
ul.topnav ul li a:hover {
 background-color:#D3C99C;
 color:#675C7C;
}
ul.topnav ul ul li a {
 color:silver;
 padding-left: 40px;
}
ul.topnav ul ul li a:hover {
 background-color:#D3CEB8;
 color:#675C7C;
}
ul.topnav span{
 float:right;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($){
 $.fn.extend({
 accordion: function(options) {
  var defaults = {
   accordion: 'true',
   speed: 300,
   closedSign: '[+]',
   openedSign: '[-]'
  };
  var opts = $.extend(defaults, options);
   var $this = $(this);
   $this.find("li").each(function() {
    if($(this).find("ul").size() != 0){
     $(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
     if($(this).find("a:first").attr('href') == "#"){
      $(this).find("a:first").click(function(){return false;});
     }
    }
   });
   $this.find("li.active").each(function() {
    $(this).parents("ul").slideDown(opts.speed);
    $(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
   });
   $this.find("li a").click(function() {
    if($(this).parent().find("ul").size() != 0){
     if(opts.accordion){
      if(!$(this).parent().find("ul").is(':visible')){
       parents = $(this).parent().parents("ul");
       visible = $this.find("ul:visible");
       visible.each(function(visibleIndex){
        var close = true;
        parents.each(function(parentIndex){
         if(parents[parentIndex] == visible[visibleIndex]){
          close = false;
          return false;
         }
        });
        if(close){
         if($(this).parent().find("ul") != visible[visibleIndex]){
          $(visible[visibleIndex]).slideUp(opts.speed, function(){
           $(this).parent("li").find("span:first").html(opts.closedSign);
          });
         }
        }
       });
      }
     }
     if($(this).parent().find("ul:first").is(":visible")){
      $(this).parent().find("ul:first").slideUp(opts.speed, function(){
       $(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
      });
     }else{
      $(this).parent().find("ul:first").slideDown(opts.speed, function(){
       $(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
      });
     }
    }
   });
 }
});
})(jQuery);
</script>
<script language="JavaScript">
$(document).ready(function() {
 $(".topnav").accordion({
  accordion:false,
  speed: 500,
  closedSign: '[+]',
  openedSign: '[-]'
 });
});
</script>
<ul class="topnav">
 <li><a href="#" target="scriptbreaker">Home</a></li>
 <li><a href="#">JavaScript</a>
  <ul>
    <li><a href="#">Cookies</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Forms</a></li>
    <li><a href="#">Games</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Navigations</a>
    <ul>
     <li><a href="#">CSS</a></li>
     <li><a href="#">JavaScript</a></li>
     <li><a href="#">JQuery</a></li>
    </ul>
   </li>
    <li><a href="#">Tabs</a></li>
  </ul>
 </li>
 <li><a href="#">Tutorials</a>
  <ul>
    <li class="active"><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">Java</a>
    <ul>
     <li><a href="#">JSP</a></li>
     <li><a href="#">JSF</a></li>
     <li><a href="#">JPA</a></li>
     <li><a href="#" target="_blank">Contact</a></li>
    </ul>
   </li>
    <li><a href="#">Tabs</a></li>
  </ul>
 </li>
 <li><a href="#" target="_blank">Contact</a></li>
 <li><a href="#">Upload script</a></li>
</ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

您可能感兴趣的文章:

JQuery1.6 使用方法三
JQuery1.6 使用方法三，想要学习jquery的朋友可以参考下。
2011-11-11
easyui Droppable组件实现放置特效
droppable和draggable有类似的地方,不过区别点在于前者着重于将元素放进某个容器中,而后者则着重于可拖拽(虽然可能一些效果两者都可以实现)。而且通过查看easyloader源码可知道，droppable并不依赖于draggable。
2015-08-08
jQuery中ajax的get()方法用法实例
这篇文章主要介绍了jQuery中ajax的get()方法用法,以实例形式较为详细的分析了get()方法的功能、定义及具体使用技巧,需要的朋友可以参考下
2014-12-12
jQuery 第二课操作包装集元素代码
上文介绍了利用$函数筛选页面上的元素和替代onload事件。$函数还有一个作用，当它的参数是一个HTML片段的时候，它返回的是包含这个HTML元素的包装集。
2010-03-03
jQuery实现公告新闻自动滚屏效果实例代码
这篇文章主要介绍了jQuery实现公告新闻自动滚屏效果实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
jquery validate 实现动态增加/删除验证规则操作示例
这篇文章主要介绍了jquery validate 实现动态增加/删除验证规则操作,结合实例形式分析了jQuery validate表单验证相关操作技巧,需要的朋友可以参考下
2019-10-10
jQuery表单对象属性过滤选择器实例详解
这篇文章主要介绍了jQuery表单对象属性过滤选择器,结合实例形式详细分析了jQuery针对表单元素进行属性过滤操作的具体实现技巧,需要的朋友可以参考下
2016-09-09
jQuery中ajax的具体使用
本文将介绍jQuery中如何使用Ajax以及通过代码详解其使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-10-10
jQuery实现简单弹窗遮罩效果
本文主要介绍了jquery实现简单弹窗遮罩效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
textarea中的手动换行处理的jquery代码
textarea的手动换行会产生换行标志，但这个标志存在却看不到，存入数据库中后读出来显示在页面上却不会换行，如何处理呢？
2011-02-02