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 相关文章推荐
Jquery插件写法笔记整理
Sep 06 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
Node 自动化部署的方法
Oct 17 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
vue项目接口域名动态获取操作
Aug 13 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提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP读取Excel类文件
2017/05/15 PHP
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
jQuery的ready方法详解
2014/11/27 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python封装原理与实现方法详解
2018/08/28 Python
python实现字符串和字典的转换
2018/09/29 Python
python分布式编程实现过程解析
2019/11/08 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
What is EJB
2016/07/22 面试题
护士的岗位职责
2013/12/04 职场文书
一年级班主任感言
2014/03/08 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js