<!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. ES6中const、let与var的对比详解

    对比 声明方式 变量提升 作用域 初始值 重复定义const 否   块级 需要 不允许let   否     块级 不需要 不允许var 是    函数级 不需要 允许 变量提升:const 和 l ...

  2. HTTP max-age与Expires的分别

    主要重点在于我们要明白一个相对(Expires)一个绝对(max-age). 分别 max-agemax-age是HTTP/1.1中,他是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对 ...

  3. 异象石（就是sdio宝藏那题）

    题解: 之前这道题写过两次题解了吧.. 实现的时候可以用set<int,cmp>来实现按照dfn排序 代码: 感觉别人的分类讨论比我的简单.. 但我觉得我这个写起来也不烦就不看别人的了.. ...

  4. Flink--DateSet的Transformation简单操作

    flatMap函数 //初始化执行环境 val env: ExecutionEnvironment = ExecutionEnvironment.getExecutionEnvironment //加 ...

  5. iframe获取元素

    原生js在网页中,父元素获取iframe中的元素: window.onload=function () { 例如: console.log(window.frames["iframe的nam ...

  6. Ubuntu16.04中nginx除80之外其他端口不能访问

    不废话, 大多数都以为是ufw防火墙的问题. 但我的是因iptables防火墙, 坑死我了. 查了好多也没查到怎么在Ubuntu关闭iptables, 索性直接卸载 apt-get remove ip ...

  7. Centos7服务器中安装MySQL（选择一个你想要的版本）

    开始,我默认安装了MySQL8,但是在测试的时候发现通过Hibernate连接之前的MySQL5.7的代码运行在连接新版本的库的时候发生异常,出于时间原因没有深度排查 但是我严重怀疑是版本匹配问题,为 ...

  8. POJ 2418 Hardwood Species 【Trie树】

    <题目链接> 题目大意: 给你一堆字符串,让你按字典序输出他们出现的频率. 解题分析: 首先,这是Trie数词频统计的题目,以Trie树的边储存字母,节点存储以该节点结尾的链所代表的字符串 ...

  9. 002.LVS管理工具的安装与使用

    一 安装IPVS 可通过源码安装或yum安装,源码包如下: http://www.linuxvirtualserver.org/software/ipvs.html [root@lvsmaster ~ ...

  10. 004.etcd集群部署-动态发现

    一 etcd发现简介 1.1 需求背景 在实际环境中,集群成员的ip可能不会提前知道.如使用dhcp自动获取的情况,在这些情况下,使用自动发现来引导etcdetcd集群,而不是指定静态配置,这个过程被 ...