PHP写json文件的树形菜单,json+jQuery实现的无限级树形菜单效果代码_鞑落船长的博客-程序员宅基地

技术标签: PHP写json文件的树形菜单  

本文实例讲述了json+jQuery实现的无限级树形菜单效果代码。分享给大家供大家参考。具体如下:

这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白。

先来看看运行效果截图:

3270b9a8e56672d35d5ded0a7fb06e83.png

在线演示地址如下:

具体代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JS无级树树形菜单

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

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

}

});

}

希望本文所述对大家的jquery程序设计有所帮助。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42398843/article/details/116007557

智能推荐

一文梳理金融风控建模全流程(Python)_风度78的博客-程序员宅基地

一、信贷风控简介 信贷风控是数据挖掘算法最成功的应用之一,这在于金融信贷行业的数据量很充足,需求场景清晰及丰富。信贷风控简单来说就是判断一个人借了钱后面(如下个月的还款日)会不会按期还钱。更专业来说,信贷风控是还款能力及还款意愿的综合考量,根据这预先的判断为信任依据进行放贷,以此大大提高了金融业务效率。与其他机器学习的工业场景不同,金融是极其厌恶风险的领域,其特殊性在于非...

lambda引入时 Error:Execution failed for task ':test:transformClassesWithRetrolambdaForDeb_这是一个秘密的博客-程序员宅基地

在引入tatarka:gradle-retrolambda时报错Error:Execution failed for task ':test:transformClassesWithRetrolambdaForDeb 将版本改为3.7.0即可(我引入的是3.5.0错了)classpath 'me.tatarka:gradle-retrolambda:3.7.0'...

【python】清空jupyter notebook所有输出的命令_嘤桃子的博客-程序员宅基地_jupyter 清空输出

在跑六百万数据集时加了print,导致输出的内容太多,不仅跑了几个小时,还让ipynb文件非常大根本打不开!!清空jupyter notebook输出的命令:jupyter nbconvert --ClearOutputPreprocessor.enabled=True --inplace xxxx.ipynb如果想把清空所有输出后的源代码文件另存为,命令为:jupyter nbconvert --ClearOutputPreprocessor.enabled=True --to notebook

如何利用github在.md文件中添加图片_曦曦湘涟的博客-程序员宅基地_github md图片

1、在github上的仓库建立一个存放图片的库,库的名字随意。如:Images-blog2、将需要在.md文件中显示的图片整理在一个文件夹中,然后push到Images-blog库中3、然后打开github官网,进入仓库的Images-blog库中,打开图片点击红框所示的按钮,copy地址4、在.md文件中填入:![Image](https://raw.githubuserconte...

前端工程化和webpack_温柔且无情的博客-程序员宅基地

前端工程化和webpack前端工程化简介前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。企业中的Vue项目和React项目,都是基于 工程化 的方式进行开发的。工程化开发好处:自成体系、标准的开发方案和流程前端开发四个现代化:模块化 (JavaScript模块化、CSS模块化、静态资源模块化)组件化 (复用现有的UI结构、样式、行为)规范化 (目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)自动化 (自

React 学习笔记 —— redux 的使用_tanleiDD的博客-程序员宅基地

安装使用运行命令yarn add reduxredux 原理图主要流程组件 通过 Action Creators 分发(dispatch) action 给 StoreStore 将 之前的状态(previousState)、action,传递给 ReducersReducers 对状态处理后,返回给 Store 新的状态组件通过 getState() 获取状态各部分职责Action Creators: 负责生成 action 对象,并分发给 StoreStore:负

随便推点

Image Smoothing via L0 Gradient Minimization基于C++的代码实现_铿锵的玫瑰的博客-程序员宅基地

论文解析图像梯度L0范数最小化图像梯度最小化平滑---一维信号图像梯度最小化平滑---二维图像源代码//实现L0测度平滑Mat L0Smoothing(Mat & image8UC3, double lambda = 2e-2, double kappa = 2.0){ //将输入的图片转换为三通道的Double类型,按原来的像素值进行1...

vue传递json数据给springboot_长春小霸王的博客-程序员宅基地_vue传递json数据

1、前端export function DelProduct(data) { return request({ url: baseURL+'/basefile/Product/delProduct/', //contentType: 'application/x-www-form-urlencoded;charset=utf-8', dataType:'json', contentType:'application/json;charset=UTF-8',

jenkins update center遇到的坑_sunican的博客-程序员宅基地_jenkins updatecenter

目前的环境是,把jenkins.war 放在MAC 的tomcat webapps里尝试修改tomcat,添加参数:vim /Library/Tomcat//conf/context.xml <Context> ... <Environment name="JENKINS_JAVA_OPTIONS" value="-Dhudson.model.UpdateCenter.pluginDownloadReadTimeoutSeconds=120 -Dhudson

el-table tree 改变某一个单元格背景色_aGreetSmile的博客-程序员宅基地

树状结构改变某个单元格颜色,根据层级判断是否展示数据<el-table :data="tableData" style="width: 100%;" :row-key="tableRowKey" border :highlight-current-row="true" :cell-style="tableCellStyle" :tree-props="treeProps" v-on:row-click="rowClick" v-loading="loading" height="100%"&gt

二项检验_loyxCCS的博客-程序员宅基地_二项检验

文章目录检验原理西瓜书2.4节提到了二项检验,看不太懂。参考网上其他人的想法后,记录一下自己的理解。以下内容也包含着自己对假设检验的理解,内容会比较冗长。检验原理对于一个学习器的泛化错误率ϵ\epsilonϵ,我们做出一个猜想(假设):ϵ≤ϵ0\epsilon\le\epsilon_0ϵ≤ϵ0​。那么如何知道这个猜想对不对呢?假如我们已知ϵ\epsilonϵ的值,那么只需将ϵ\epsil...

推荐文章

热门文章

相关标签