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 左右悬浮对联广告代码示例
Dec 12 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
Python wordcloud库安装方法总结
2020/12/31 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
预备党员思想汇报
2014/01/08 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
优秀教师工作感言
2014/02/16 职场文书
部门年终奖分配方案
2014/05/07 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2014财务年度工作总结
2014/11/11 职场文书
美术教师个人总结
2015/02/06 职场文书
公司管理制度范本
2015/08/03 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
mysql查看表结构的三种方法总结
2022/07/07 MySQL