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


Posted in Javascript onAugust 24, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
vue计算属性get和set用法示例
Feb 08 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 #Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 #Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 #Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 #Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 #Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 #Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 #Javascript
You might like
七款最流行的PHP本地服务器分享
2013/02/19 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python递归查询菜单并转换成json实例
2017/03/27 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python读写配置文件操作示例
2019/07/03 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
学习经验交流会主持词
2014/04/01 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
Nginx实现负载均衡的项目实践
2022/03/18 Servers