jquery实现树形菜单完整代码


Posted in Javascript onDecember 29, 2015

本实例实现了树形的动态菜单,兼容IE8,火狐,Chrome等浏览器。使用了jQuery的toggle() 方法。效果和代码如下:

jquery实现树形菜单完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery的树形菜单代码 </title>
<meta name="keywords" content="www.cnblogs.com/jihua"/>
<style type="text/css">
body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #336699;}
ul,ol,li,dl,dt,dd { margin:0; padding:0; list-style-type:none;}
h1,h2,h3,form,input,iframe,span { margin:0; padding:0;} 
a { color:#7FB0C8;}
a:link {color: #7FB0C8; TEXT-DECORATION: none;}
a:visited {color: #7FB0C8; TEXT-DECORATION: none;}
a:hover {color: #fff; TEXT-DECORATION: none;}
.white { color:#fff;}
.white a:link {color: #fff; TEXT-DECORATION: none;}
.white a:visited {color: #fff; TEXT-DECORATION: none;}
.white a:hover {color: #73E1F5; TEXT-DECORATION: none;}
/* 树形菜单开始 */
.close { float:right; clear:right; font-size:12px; font-weight:normal; cursor:pointer; padding-right:10px;}
.title { font-size:14px; color:#fff; margin-bottom:10px; padding-left:5px; width:290px;}
.menu { width:290px; height:330px; margin-bottom:10px;}

.l1 { background:#000; font-size:13px; padding:5px 0 0 30px; height:20px; margin-bottom:5px; cursor:pointer;}
.slist { margin:0 0 5px 0; display:none;}
.l2 { padding:0 0 0 35px; font-size:13px;}
.l2 a { padding:6px 0 0 5px; width:230px; height:21px; display:block;} 
.currentl2 a,.l2 a:hover { background:#1E5A82; color:#fff;}
.sslist { background:#156890; width:235px; overflow:hidden; margin:0 0 5px 35px; display:none;}
.l3 a { padding:6px 0 0 5px; width:230px; height:20px; display:block;} 
.currentl3 a,.l3 a:hover { color:#fff; font-weight:bold;}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 // 树状菜单
 $(document).ready(function () {
 $(".l1").toggle(function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "slow");
  $(this).next(".slist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 }, function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "slow");
  $(this).next(".slist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 });

 $(".l2").toggle(function () {
  $(this).next(".sslist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 }, function () {
  $(this).next(".sslist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 });

 $(".l2").click(function () {
  $(".l3").removeClass("currentl3");
  $(".l2").removeClass("currentl2");
  $(this).addClass("currentl2");
 });

 $(".l3").click(function () {
  $(".l3").removeClass("currentl3");
  $(this).addClass("currentl3");
 });

 $(".close").toggle(function () {
  $(".slist").animate({ height: 'toggle', opacity: 'show' }, "fast");
  $(".sslist").animate({ height: 'toggle', opacity: 'show' }, "fast");
 }, function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "fast");
  $(".sslist").animate({ height: 'toggle', opacity: 'hide' }, "fast");
 });
 });
</script>
</head>
<body>
<h1 class="title"><span class="close">全部收起/展开</span>Jihua树形菜单</h1>
<div class="menu">
 <h1 class="l1">一级菜单</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#" target="_blank">·jihua.cnblogs.com</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 </ul>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#" target="_blank">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 </ul>
 <h2 class="l2"><a href="#">二级3water.com</a></h2>
 </div>
 <h1 class="l1">一级脚本</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单计划</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 </div>
 <h1 class="l1">一级菜单</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 </div>
</div>
</body>
</html>

本实例用到jquery的toggle() 方法,介绍如下:

定义和用法

toggle() 方法切换元素的可见状态。

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

语法
$(selector).toggle(speed,callback,switch)

jquery实现树形菜单完整代码

提示和注释

注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

以上就是jquery实现树形菜单完整代码,希望对大家的学习jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 #Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 #Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 #Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 #Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 #Javascript
javascript实现下拉提示选择框
Dec 29 #Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 #Javascript
You might like
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python opencv如何实现图片绘制
2020/01/19 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python如何根据时间序列数据作图
2020/05/12 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
对python中list的五种查找方法说明
2020/07/13 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
会计专业自荐信范文
2013/12/02 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
公司股份合作协议书
2014/12/07 职场文书
遗失证明范文
2015/06/19 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
护士工作心得体会
2016/01/25 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android