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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
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采集时被封ip的解决方法
2010/08/29 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
深入理解Node module模块
2018/03/26 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
详解python里的命名规范
2018/07/16 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
python tornado使用流生成图片的例子
2019/11/18 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
邮政员工辞职信
2014/01/16 职场文书
高中语文课后反思
2014/04/27 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
骨干教师个人总结
2015/02/11 职场文书
董事长助理岗位职责
2015/02/11 职场文书
幼师小班个人总结
2015/02/12 职场文书
中学生运动会广播稿
2015/08/19 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
SQLServer之常用函数总结详解
2021/08/30 SQL Server