<!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. sharepoint2013 Restore-SPSite 报错，采用数据库还原

    PS C:\Users\spadmin> Restore-SPSite http://hz0xw002049:8099 -Path D:\20170731MossSiteSP.bak -Forc ...

  2. sed 简单修改配置文件ip地址

    sed -i 's/old ip/new ip/g' file.txt

  3. Application Initialization UI for IIS 7.5

    IIS Application Initialization for IIS 7.5 enables website administrators to improve the responsiven ...

  4. （三）apache的安装与配置

    一.安装: 推荐使用cygwin自带的Setup.exe.带来的好处不言而喻,所有安装的程序都是经过测试的,这样确保你不会把宝贵的时间浪费来毫无意义的劳动上. 在安装程序中选择两个包就行了(分别是ap ...

  5. Linux 配置最新的epel源

    一.Centos6 yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm 二.Cento ...

  6. 浏览器iscroll

    ::-webkit-scrollbar{width:4px;height:4px;background:transparent}::-webkit-scrollbar-track{background ...

  7. Nginx的配置与部署研究，Upstream负载均衡模块

    Nginx 的 HttpUpstreamModule 提供对后端(backend)服务器的简单负载均衡.一个最简单的 upstream 写法如下: upstream backend { server ...

  8. BZOJ2119 股市的预测 字符串 SA ST表

    原文链接https://www.cnblogs.com/zhouzhendong/p/9069171.html 题目传送门 - BZOJ2119 题意 给定一个股票连续$n$个时间点的价位,问有多少段 ...

  9. Python图表数据可视化Seaborn：3. 线性关系数据| 时间线图表| 热图

    1. 线性关系数据可视化 lmplot( ) import numpy as np import pandas as pd import matplotlib.pyplot as plt import ...

  10. 设计模式之单例模式及应用demo

    单例模式是创建型模式之一. 单例模式顾名思义是单例的,也就是只有一个实例化对象,这都来源于它的私有化构造函数. 单例模式特点: 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3. ...