json+jQuery实现的无限级树形菜单效果代码


Posted in Javascript onAugust 27, 2015

本文实例讲述了json+jQuery实现的无限级树形菜单效果代码。分享给大家供大家参考。具体如下:

这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白。

先来看看运行效果截图:

json+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" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<title>JS无级树树形菜单</title>
<style type="text/css">
.menuTree{ margin-left:-30px;}
.menuTree div{ padding-left:30px;}
.menuTree div ul{ overflow:hidden; display:none; height:auto;}
.menuTree span{ display:block; height:25px; line-height:25px; padding-left:5px; margin:1px 0; cursor:pointer; border-bottom:1px solid #CCC;}
.menuTree span:hover{ background-color:#e6e6e6; color:#cf0404;}
.menuTree a{ color:#333; text-decoration:none;}
.menuTree a:hover{ color:#06F;}
.btn{ height:30px; margin-top:10px; border-bottom:1px solid #CCC;}
</style>
</head>
<body>
<div class="btn">
<input name="" type="button" id="btn_open" value="全部展开" />  
<input name="" type="button" id="btn_close" value="全部收缩" />
</div>
<div id="menuTree" class="menuTree"></div>
</body>
</html>
<script type="text/javascript">
var json = [{"name":"*a","list":[
 {"name":"**a","url":"#a1"},
 {"name":"**aa","list":[
  {"name":"***a","url":"#a11"},  {"name":"***aa","list":[ {"name":"****a","url":"#a111"},  {"name":"****aa","list":[ {"name":"*****a","url":"#a1111"},  {"name":"*****aa","url":"#a1112"}
  ]}
 ]},
  {"name":"***aaa","url":"#a13"},
  {"name":"***aaaa","url":"#a14"}
  ]
  },
  {"name":"**a","url":"#a3"}
 ]
 },
 {"name":"*b","list":[
 {"name":"**b","url":"#b1"},
 {"name":"**bb","list":[
   {"name":"****b","url":"#b111"},
   {"name":"****bb","url":"#b112"}
   ]
 },
 ]
 },
 {"name":"*c","list":[
 {"name":"**c","url":"#c1"},
 {"name":"**cc","url":"#c2"}
 ]
 },
 {"name":"*d"}
 ]
/*递归实现获取无级树数据并生成DOM结构*/
var str = "";
var forTree = function(o){
 for(var i=0;i<o.length;i++){
 var urlstr = "";
 try{
 if(typeof o[i]["url"] == "undefined"){
 urlstr = "<div><span>"+ o[i]["name"] +"</span><ul>";
 }else{
 urlstr = "<div><span><a href="+ o[i]["url"] +">"+ o[i]["name"] +"</a></span><ul>"; 
 }
 str += urlstr;
 if(o[i]["list"] != null){
 forTree(o[i]["list"]);
 }
 str += "</ul></div>";
 }catch(e){}
 }
 return str;
}
/*添加无级树*/
document.getElementById("menuTree").innerHTML = forTree(json);
/*树形菜单*/
var menuTree = function(){
 //给有子对象的元素加[+-]
 $("#menuTree ul").each(function(index, element) {
 var ulContent = $(element).html();
 var spanContent = $(element).siblings("span").html();
 if(ulContent){
 $(element).siblings("span").html("[+] " + spanContent) 
 }
 });
 $("#menuTree").find("div span").click(function(){
 var ul = $(this).siblings("ul");
 var spanStr = $(this).html();
 var spanContent = spanStr.substr(3,spanStr.length);
 if(ul.find("div").html() != null){
 if(ul.css("display") == "none"){
 ul.show(300);
 $(this).html("[-] " + spanContent);
 }else{
 ul.hide(300);
 $(this).html("[+] " + spanContent);
 }
 }
 })
}()
/*展开*/
$("#btn_open").click(function(){
 $("#menuTree ul").show(300);
 curzt("-");
})
/*收缩*/
$("#btn_close").click(function(){
 $("#menuTree ul").hide(300);
 curzt("+");
})
function curzt(v){
 $("#menuTree span").each(function(index, element) {
 var ul = $(this).siblings("ul");
 var spanStr = $(this).html();
 var spanContent = spanStr.substr(3,spanStr.length);
 if(ul.find("div").html() != null){
 $(this).html("["+ v +"] " + spanContent);
 }
 }); 
}
</script>

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

Javascript 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 #Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 #Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 #Javascript
js实现的早期滑动门菜单效果代码
Aug 27 #Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 #Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 #Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 #Javascript
You might like
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
javascript 面向对象继承
2009/11/26 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
setTimeout学习小结
2017/02/08 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Python如何急速下载第三方库详解
2020/11/02 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python