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滚动条多种样式,推荐
Feb 05 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
json数据处理及数据绑定
Jan 25 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
Javascript实现购物车功能的详细代码
May 08 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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中使用XML
2006/10/09 PHP
图形数字验证代码
2006/10/09 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
PHP 8新特性简介
2020/08/18 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
js获取内联样式的方法
2015/01/27 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
django 创建过滤器的实例详解
2017/08/14 Python
Python实现求数列和的方法示例
2018/01/12 Python
对Python实现累加函数的方法详解
2019/01/23 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
keras:model.compile损失函数的用法
2020/07/01 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
小学教师师德整改措施
2014/09/29 职场文书
继承公证书格式
2015/01/26 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Java 死锁解决方案
2022/05/11 Java/Android
python如何读取和存储dict()与.json格式文件
2022/06/25 Python