<!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>

　　

json获取数据生成动态菜单（转）的更多相关文章

  1. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  2. highcharts动态获取数据生成图表问题

    动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说).  柱状图的动态传值: //获取后台数据 va ...

  3. php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架

    话不多说了.直接开始吧  (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 {        "index": {                ...

  4. treeTable的使用（ajax异步获取数据，动态渲染treeTable）

    一.展示效果(treetable基本样式https://www.cnblogs.com/shuihanxiao/p/10413454.html) 二.html文件(若一个页面又多个treetable, ...

  5. 5.JasperReports学习笔记5-其它数据生成动态的报表（WEB）

    转自:http://www.blogjava.net/vjame/archive/2013/10/12/404908.html 一.空数据(Empty Datasources) 就是说JRXML文件里 ...

  6. 在PL/SQL使用游标获取数据及动态SQL

    1.游标概念: 当在PL/SQL块中执行DML(增删改)时,Oracle会为其分配上下文区(Context Area),游标是指向上下文区的指针 2.  游标分类: A.  隐式游标 a.  在PL/ ...

  7. Angularjs 根据数据结构创建动态菜单无限嵌套循环--指令版

    目标:根据数据生成动态菜单,希望可以根据判断是否有子集无限循环下去. 菜单希望的样子是这样的: 菜单数据是这样的: $scope.expanders = [{ title: 'title1', lin ...

  8. SAAS云平台搭建札记: (三) AntDesign + .Net Core WebAPI权限控制、动态菜单的生成

    我们知道,当下最火的前端框架,非蚂蚁金服的AntDesign莫属,这个框架不仅在国内非常有名,在国外GitHub上React前端框架也排名第一.而且这个框架涵盖了React.Vue.Angular等多 ...

  9. WIN 下的超动态菜单（一）

    WIN 下的超动态菜单(一)介绍 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/     ...

随机推荐

  1. order by 导出数据不一致的问题

    转自 http://blog.csdn.net/wwwwei_csdn/article/details/78181197 前言   数据库分页是后台经常要使用的技术手段,有时候进行数据库查询会根据业务 ...

  2. WPF中矢量图制作和引用

    WPF程序有时需要适配不同大小的屏幕,图片是像素图的话,拉伸之后会变模糊,影响美观度,因此可以考虑使用矢量图.网上找到了相应的介绍:http://learnwpf.com/post/2006/06/0 ...

  3. day5.python列表练习题

    写代码,有如下列表,按照要求实现每一个功能 li = [“alex”, “WuSir”, “ritian”, “barry”, “wenzhou”] 1.计算列表的长度并输出 print(len(li ...

  4. Docker 二进制安装docker

    https://blog.csdn.net/bruce_yds/article/details/80035714

  5. BZOJ1009 [HNOI2008]GT考试 矩阵

    去博客园看该题解 题目 [bzoj1009][HNOI2008]GT考试 Description 阿申准备报名参加GT考试,准考证号为N位数X1X2….Xn(0<=Xi<=9),他不希望准 ...

  6. P1040 加分二叉树 区间dp

    题目描述 设一个nn个节点的二叉树tree的中序遍历为(1,2,3,…,n1,2,3,…,n),其中数字1,2,3,…,n1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第ii个节 ...

  7. Python replace() 和 re.sub() 字符串字符替换

    Python replace() 和 re.sub() 字符串字符替换 replace() testStr = 'aa:bb[cc' testStr.replace(':','_') 每次只能替换一个 ...

  8. Git submodule 仓库中包含另外的仓库(子仓库)

    Git submodule 仓库中包含另外的仓库(子仓库) 添加 submodule 在父仓库 git 目录下: git submodule add ssh://ip/[path]/xxx.git 注 ...

  9. c++基本数据类型及其取值范围

    #include<iostream> #include<string> #include <limits> using namespace std; int mai ...

  10. Linux常用命令大全（转）

    (转)Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因, ...