PHP写json文件的树形菜单,树形菜单（无级树）json数据

JS无级树树形菜单

.menuTree{ margin-left:-30px;}

.menuTree div{ padding-left:30px;}

.menuTree div ul{ overflow:hidden; /*height:0;*/ display:none; height:auto;}

.menuTree span{ display:block; height:25px; line-height:25px; padding-left:5px; /*width:100px;*/ 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;}

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

var urlstr = "";

try{

if(typeof o[i]["url"] == "undefined"){

urlstr = "

"+ o[i]["name"] +"

}else{

urlstr = "

"+ o[i]["name"] +"

}

str += urlstr;

if(o[i]["list"] != null){

forTree(o[i]["list"]);

}

str += "

}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);

}

});

}

运行代码

复制代码

另存代码

提示：您可以先修改部分代码再运行

PHP写json文件的树形菜单,树形菜单（无级树）json数据相关推荐

图形化开发（六）01-Three.js之导入模型——3dmax和SketchUp-editor编辑器导出json文件，在创建模型initMesh中外部的JSON文件
图形化开发(六)01-Three.js之导入模型--3dmax和SketchUp-editor编辑器导出json文件,在创建模型initMesh中外部的JSON文件导入模型官方推荐我们使用的3D模 ...
flex bison解析json文件_每秒解析千兆字节的 JSON 解析器开源了
本文转自我们的网站 InfoQ,译者无明.除了推荐 simdjson 之外,还想测试一下微信平台编辑器的代码样式功能. 事实证明,微信文章的代码展示能力很强了.非常棒. 近日,GitHub 开源了一 ...
FLIR数据集json文件转yolo格式txt （PS.coco数据集json文件转yolo格式txt）
最近使用FLIR开源红外数据集和yolo做训练,但是标签文件只有一个json文件,需要转为yolo需要的标签格式 ,代码如下: from __future__ import print_functio ...
vs code c语言json文件配置,解析VScode在Windows环境下c_cpp_properties.json文件配置问题(推荐)...
前言继承是OOP设计中的重要概念.在C++语言中,派生类继承基类有三种继承方式:私有继承(private).保护继承(protected)和公有继承(public).一.继承规则继承是C++中的重要特 ...
python post 请求json文件_requests的post请求提交表单、json串和文件数据讲解
HTTP协议中没有规定post提交的数据必须使用什么编码方式,服务端根据请求头中的Content-Type字段来获取编码方式,再对数据进行解析.具体的编码方式包括如下: - application/x ...
Unity的Json解析二–写Json文件
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50378805 作者:car ...
手写小程序摇树优化工具（三）——遍历json文件
见素包朴,少私寡欲,绝学无忧 github: miniapp-shaking 上一章我们介绍了遍历js文件的方法,接下来我们介绍其他文件的遍历. 1. 遍历JSON文件对于json文件,我们直接读取 ...
npm 包与模块关系下载使用包 init命令 package.json文件 node_modules文件夹全局安装包和本地安装包开发依赖和生产依赖
npm 了解npm npm 全称Node Package Manager(node 包管理器),它的诞生是为了解决 Node 中第三方包共享的问题. npm 不需要单独安装.在安装Node的时候,会连 ...
【Python爬虫学习笔记6】JSON文件存储
JSON简介 JSON(全称JavaScript Obejct Notation,JavaScript对象标记),基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言 ...
netcore读取json文件_.Net Core如何读取Json配置文件
前言:在与传统的asp.net MVC项目相比,.net core项目在项目目录的文件结构上和功能上与前者都有很大的区别.例如:在.net core中使用Startup.cs取代Global.asax ...

PHP写json文件的树形菜单,树形菜单（无级树）json数据

PHP写json文件的树形菜单,树形菜单（无级树）json数据相关推荐

最新文章

热门文章