<!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. module.exports与exports的区别

    引言 每一个node.js执行文件,都自动创建一个module对象,同时,module对象会创建一个叫exports的属性,初始化的值是 {} 例子 foo.js exports.a = functi ...

  2. Zookeeper（一）CentOS7.5搭建Zookeeper3.4.12集群与命令行操作

    一. 分布式安装部署 1.0 下载地址 官网首页: https://zookeeper.apache.org/ 下载地址: http://mirror.bit.edu.cn/apache/zookee ...

  3. la4394

    题解: 首先区间dp是比较好想到的 然后我感觉接下来就是乱搞... 我们会发现接下来的操作 无非就是 用一种颜色去覆盖这整个区间 然后在做 于是我用了比较暴力的做法,f[i][j][k]表示i-j这段 ...

  4. java中String和StringBuffer的区别

    前言 String和StringBuffer本质上都是修饰字符串的只是含义不同 StringBuffer叫做字符串缓冲区 首先看下string类的例子 public class Work1 { pub ...

  5. Apache Pulsar——企业级消息订阅系统介绍

    Apache Pulsar是一款由雅虎开发的类似于Kafka的企业级消息订阅系统,在2016将其开源,由Apach基金会孵化,现在已经成长为Apache基金会的顶级项目.Pulsar在雅虎内部已经运行 ...

  6. yii2上传七牛图片(超详细)

    前期准备 1.在七牛注册账号https://portal.qiniu.com/signup/choice 2.创建空间https://portal.qiniu.com/bucket(记住存储空间名称和 ...

  7. 05. Matplotlib 1 |图表基本元素| 样式参数| 刻度 注释| 子图

    1.Matplotlib简介及图表窗口 Matplotlib → 一个python版的matlab绘图接口,以2D为主,支持python.numpy.pandas基本数据结构,运营高效且有较丰富的图表 ...

  8. scrapy 命令行创建 启动 跟踪

    不是python文件中的,而是在虚拟机中运行的命令行,先要workon进入虚拟环境 2.scrapy 框架的使用 -1.新建项目 命令:scrapy startproject <project_ ...

  9. unity打aar包工具

    需求: unity将游戏导出android工程之后,打成aar包的工具 第一种: 高版本的unity导出的android工程是android studio版的,那么打成aar的流程就是 1.build ...

  10. 64位 windows10下 Apache2.4 + php7 + phpstorm 相关设置

    64位 windows10下 Apache2.4 + php7 + phpstorm 相关设置   转  https://blog.csdn.net/laurencechan/article/deta ...