基于jquery实现的树形菜单效果代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了基于jquery实现的树形菜单效果代码。分享给大家供大家参考。具体如下:

这是一款基于jquery实现的树形菜单代码,点击菜单项可以向下滑出对应的二级菜单,效果流畅自然。

先来看看运行效果截图:

基于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>
<style>
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; overflow-y:auto; overflow-x:hidden; margin-bottom:10px;}
.menu { SCROLLBAR-FACE-COLOR: #002537; SCROLLBAR-HIGHLIGHT-COLOR: #002537; SCROLLBAR-SHADOW-COLOR: #0E6893; SCROLLBAR-3DLIGHT-COLOR: #0E6893; SCROLLBAR-ARROW-COLOR: #fff; SCROLLBAR-TRACK-COLOR: #053d58;SCROLLBAR-DARKSHADOW-COLOR: #002537; SCROLLBAR-BASE-COLOR: #01152a;}
.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="jquery1.3.2.js"></script>
<script>
// 树状菜单
$(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: 'hide'}, "fast"); 
 $(".sslist").animate({height: 'toggle', opacity: 'hide'}, "fast"); 
  },function(){
 $(".slist").animate({height: 'toggle', opacity: 'show'}, "fast"); 
 $(".sslist").animate({height: 'toggle', opacity: 'show'}, "fast"); 
 }); 
});
</script>
</head>
<body>
<h1 class="title"><span class="close">全部收起/展开</span>树形菜单</h1>
<div class="menu">
 <h1 class="l1">一级菜单1</h1>
 <div class="slist">
 <h2 class="l2"><a href="javascript:function()">二级菜单1</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="javascript:function()">·三级菜单1</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单1</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单1</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单1</a></li>
 </ul>
 <h2 class="l2"><a href="javascript:function()">二级菜单2</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="javascript:function()">·三级菜单2</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单2</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单2</a></li>
 <li class="l3"><a href="javascript:function()">·三级菜单2</a></li>
 </ul>
 <h2 class="l2"><a href="javascript:function()">二级菜单3</a></h2>
 </div>
 <h1 class="l1">一级菜单2</h1>
 <div class="slist">
 <h2 class="l2"><a href="javascript:function()">二级菜单2</a></h2>
 <h2 class="l2"><a href="javascript:function()">二级菜单2</a></h2>
 <h2 class="l2"><a href="javascript:function()">二级菜单2</a></h2>
 </div>
 <h1 class="l1">一级菜单3</h1>
 <div class="slist">
 <h2 class="l2"><a href="javascript:function()">二级菜单3</a></h2>
 <h2 class="l2"><a href="javascript:function()">二级菜单3</a></h2>
 <h2 class="l2"><a href="javascript:function()">二级菜单3</a></h2>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
this[] 指的是什么内容 讨论
Mar 24 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
jQuery.extend 函数及用法详细
Sep 06 #Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 #Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 #Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 #Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 #Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 #Javascript
浅谈javascript函数式编程
Sep 06 #Javascript
You might like
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
Jquery 扩展方法
2010/05/06 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
浅谈Python数据类型之间的转换
2016/06/08 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
详解Python中的正则表达式
2018/07/08 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
python能自学吗
2020/06/18 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
社区工作者先进事迹
2014/01/18 职场文书
领班岗位职责范文
2014/02/06 职场文书
妇女干部培训方案
2014/05/12 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
同事去世追悼词
2015/06/23 职场文书
PHP基本语法
2021/03/31 PHP
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL