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 相关文章推荐
js几个验证函数代码
Mar 25 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
Js apply方法详解
Feb 16 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 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 日,周,月点击排行统计
2012/01/11 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
python备份文件的脚本
2008/08/11 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
python PIL模块的基本使用
2020/09/29 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
小学生暑假感言
2014/02/06 职场文书
农村婚礼主持词
2014/03/13 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
本科毕业生求职信
2014/06/15 职场文书
小学生通知书评语
2014/12/31 职场文书
事业单位年度考核评语
2014/12/31 职场文书
如何写辞职书
2015/02/26 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL