jquery 根据后台传递过来的三维数组动态生成三级菜单
根据后台传递过来的三维数组动态生成三级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态树型导航</title>
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
</head>
<body>
<div class="list">
<ul class="one">
<!-- <li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();" class="active">中国文联</a>
<ul class="hide two">
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();">综合部</a></li>
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();">大型活动部</a>
</li>
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();">展览部</a>
</li>
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();">以为会工作部</a>
</li>
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();">信息资源不</a>
</li>
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();">刷给你年展</a>
</li>
</ul>
</li>
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();" class="active">组织机构</a>
<ul class="hide two">
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();" class="active">没写机关</a>
<ul class="hide three">
<li> <span class="anim">></span><a href="###">十分感果</a></li>
<li> <span class="anim">></span><a href="###">十分感果</a></li>
<li> <span class="anim">></span><a href="###">十分感果</a></li>
</ul>
</li>
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();" class="active">艺术中心</a>
<ul class="hide three">
<li> <span class="anim">></span><a href="###">如俄额</a></li>
<li> <span class="anim">></span><a href="###">如俄额</a></li>
</ul>
</li>
<li>
<span class="anim"><img src="data:images/LOGO.png" alt="" width="20px"></span>
<a href="javrscript:void();" class="active">杂志社</a>
<ul class="hide three">
<li> <span class="anim">></span><a href="###">再度</a></li>
<li> <span class="anim">></span><a href="###">再度</a></li>
<li> <span class="anim">></span><a href="###">再度</a></li>
<li> <span class="anim">></span><a href="###">再度</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="###" class="active">哈哈哈巴啦啦</a>
<ul class="hide">
<li><a href="###">巴啦啦小魔仙</a></li>
<li><a href="###">巴啦啦小魔仙</a></li>
<li><a href="###">巴啦啦小魔仙</a></li>
<li><a href="###">巴啦啦小魔仙</a></li>
<li><a href="###">巴啦啦小魔仙</a></li>
<li><a href="###">巴啦啦小魔仙</a></li>
<li><a href="###">巴啦啦小魔仙</a></li>
</ul>
</li> -->
</ul>
</div> <script>
// 当文档被加载时触发函数
$(function(){
// 先让第一个一级菜单有背景颜色
$('div.list>ul>li').eq(0).addClass('color');
$('ul.one').on('click','a.active',function(){//不能直接用$获取到动态添加的元素
// console.log("====================");
// console.log($(this));
// 判断ul是否隐藏，如果是隐藏的就让它显示
if($(this).siblings("ul").css("display")=="none"){
$(this).siblings("ul").slideDown(100);
$(this).parent('li').addClass('color');
$(this).parent('li').siblings().removeClass('color');
$(this).siblings('.anim').addClass('rota');
}
// 如果不是隐藏的，就让它隐藏
else{
$(this).siblings("ul").slideUp(100);
$(this).siblings('.anim').removeClass('rota');
}
});
})
</script> <!-- 处理后台传递过来的数据，动态创建左侧导航 -->
<script>
// var xmlhttp = new XMLHttpRequest();
// xmlhttp.onreadystatechange = function() {
// if(this.readyState==4 && this.status==200) {
// // 将后台返回的字符串数据转js对象
// myobj=JSON.parse(this.responseText);
// // 对数据进行处理
// $(document).ready(function() {
// $.ajax({
// url: '',
// async: 'yes',
// type: 'Post',
// dataType: 'json',
// success: function(data) {
// creatmenu(data);
// },error:function(data) {
// alert("error:"+JSON.stringify(data));
// }
// })
// });
// }
// }
//模拟后台传递过来的数据
var data=[
{ "id": "1", iconCls: "fa fa-send-o", text: "敏捷开发", children: [
{ "id": "1_1", iconCls: "fa fa-desktop", text: "代码生成器", url: "../pages/index.jsp" },
{ "id": "1_2", iconCls: "fa fa-search", text: "单页管理", url: "pages/1.html"},
{ "id": "1_3", iconCls: "fa fa-send-o", text: "插件演示", url: "pages/1.html" },
{ "id": "1_4", iconCls: "fa fa-window-restore", text: "开发示例", children: [
{ "id": "1_4_1", iconCls: "fa fa-assistive-listening-systems", text: "商机管理" , url: "pages/1.html"},
{ "id": "khgl", iconCls: "fa fa-vcard", text: "客户管理", url: "pages/1.html" },
{ "id": "kpxx", iconCls: "fa fa-file-excel-o", text: "开票信息" , url: "pages/1.html"},
{ "id": "khdd", iconCls: "fa fa-modx", text: "客户订单" , url: "pages/1.html"}
]
}
]
},
{ "id": "xtgl", iconCls: "fa fa-desktop", text: "系统管理", children: [
{ "id": "xzgl", iconCls: "fa fa-leaf", text: "行政管理", url: "pages/1.html" },
{ "id": "sjzd", iconCls: "fa fa-book", text: "数据字典", url: "pages/1.html" },
{ "id": "djbm", iconCls: "fa fa-barcode", text: "单据编码", url: "pages/1.html" },
{ "id": "xtgn", iconCls: "fa fa-navicon", text: "系统功能", url: "pages/1.html" },
{ "id": "excel", iconCls: "fa fa-file-excel-o", text: "Excel配置", children: [
{ "id": "drpz", iconCls: "fa fa-sign-out", text: "导入配置", url: "pages/1.html" },
{ "id": "dcpz", iconCls: "fa fa-sign-out", text: "导出配置", url: "pages/1.html" }
]
},
{ "id": "sjgl", iconCls: "fa fa-database", text: "数据管理", children: [
{ "id": "sjklj", iconCls: "fa fa-plug", text: "数据库连接", url: "pages/1.html" },
{ "id": "sjbgl", iconCls: "fa fa-table", text: "数据表管理", url: "pages/1.html" },
{ "id": "sjygl", iconCls: "fa fa-bullseye", text: "数据源管理", url: "pages/1.html" }
]
}
]},
{ "id": "sjgl", iconCls: "fa fa-database", text: "数据管理", children: [
{ "id": "sjklj", iconCls: "fa fa-plug", text: "数据库连接", url: "pages/1.html" },
{ "id": "sjbgl", iconCls: "fa fa-table", text: "数据表管理", url: "pages/1.html" },
{ "id": "sjygl", iconCls: "fa fa-bullseye", text: "数据源管理", url: "pages/1.html" }
]
}
]; // console.log("ddddd");
creatmenu(data);//调用方法 // 定义一个创建菜单的方法
function creatmenu(data) {
// console.log(data);
$.each(data,function(i,item) {//遍历整体数据，一支一支的遍历，不是一层一层去遍历
console.log(item);
// console.log(item.children);
// console.log(item.children.length);
console.log(item.text);
if(item.children) {//如果1级菜单有子菜单,就添加一级菜单数据并包含2级ul
// 添加一级菜单
$('ul.one').append("<li><span class='anim'><img src='images/jian.png' alt='' width='15px' height='15px'></span><a href='javrscript:void();' class='active'>"+item.text+"</a><ul class='hide two two"+i+" '></ul></li>"); // var ul2 = $("<li></li>");
// console.log(i);
// console.log($(this).index());//为什么全都是-1？？？？？？？？？？
$.each(item.children,function(j,val) {//循环1级菜单的2级菜单
// console.log(i);
// console.log($('ul.one').eq(i));
// $('ul.one').eq(i).children('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three'></ul></li>");
// $('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three'></ul></li>");
// $('ul.one').eq(i).children('li').children('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three'></ul></li>");
// $(ul2).append("<ul class='hide two'></ul>").appendTo(parent);
// $(ul.one).eq(i).children(ul2).children('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a></li>");
// $('ul.one').eq(i).children('li').children('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three'></ul></li>");
// console.log(val);
// console.log(val.text);
// console.log(val.children);
if(val.children) {//如果二级菜单存在子菜单，就添加三级菜单
$("ul."+"two"+i).append("<li> <span class='anim'><img src='images/jian.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three three"+j+"'></ul></li>"); // var ul3 = $("<ul class='hide three'></ul>");
$.each(val.children,function(q,meta) {// 遍历3级菜单
$("ul."+"three"+j).append("<li> <span class='anim'><img src='images/jian.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+meta.text+"</a></li>");
// $('ul.two').eq(j).children('ul.three').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+meta.text+"</a></li>");
// $('ul.one').eq(i).children('li').children('ul.two').eq(j).children('ul.three').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+meta.text+"</a></li>");
})
}
else{//如果二级菜单没有子菜单,就只添加二级菜单
$("ul."+"two"+i).append("<li> <span class='anim'><img src='images/jian.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a></li>");
return;
} })
}
else{//如果一级菜单没有子菜单就只渲染一级菜单数据 $('ul.one').append("<li><span class='anim'><img src='images/jian.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+item.text+"</a></li>");
return;
}
});
}
</script>
</body>
</html>
jquery 根据后台传递过来的三维数组动态生成三级菜单的更多相关文章
- JQuery实现动态生成树形菜单
jQuery实现动态生成树形菜单 有一个需求:菜单导航条需要依据不同的权限动态提取出来.计划是将功能模块与用户权限之间的关系保持到一个配置表中.所以功能菜单的话就需要动态提取出来再显示.借助jquer ...
- 【转】jQuery.ajax向后台传递数组问题
$.ajax({ url: "/xxx", type: "GET", data: { "boxIds": boxIds, "box ...
- jQuery.ajax向后台传递数组问题
今天重温了一个问题,jQuery.ajax向后台传递一个数组,而在后台接收不到该值 前台js方法部分代码如下: //创建一个测试数组 var boxIds = new Array(); boxIds. ...
- ajax如何向后台传递数组，在后台该如何接收的问题（项目积累）
一.后台如何接收从前台接收的数组: 使用request.getParameterValues(String xxx); <input type="text" name=&qu ...
- jquery ajax post 传递数组 ，多checkbox 取值
jquery ajax post 传递数组 ,多checkbox 取值 http://w8700569.iteye.com/blog/1954396 使用$.each(function(){});可以 ...
- jquery接收后台数组或集合回显复选框
公司使用的框架比较旧,没有使用el等表达式.如果后台传递的是数组,需要把数组转为以逗号分隔的字符串. <% String context = request.getContextPath(); ...
- ajax向后台传递数组参数并将后台响应的数据赋值给一个变量供其它插件使用
1.在js中封装ajax向后台传递数组参数函数 //combogrid * * @Description 封装ajax向后台传递数组参数并将后台响应的数据赋值给一个变量方便其他插件使用该数据函数 * ...
- jquery与后台相互传递中文参数乱码
前端.后台传递中文参数,乱码的情况: var a="参数乱码"; //编译两次 window.location.href=encodeURI(encodeURI(&q ...
- Jquery Ajax方法传递json到action
ajax向后台传入json需要设置option,如下 contentType:'application/json' data:Json.Stringify(jsObj) 后台处理复杂json对象(不知 ...
随机推荐
- 洛谷 P2563 [AHOI2001]质数和分解 题解
P2563 [AHOI2001]质数和分解 题目描述 任何大于 1 的自然数 n 都可以写成若干个大于等于 2 且小于等于 n 的质数之和表达式(包括只有一个数构成的和表达式的情况),并且可能有不止一 ...
- 转载：基于 Hive 的文件格式：RCFile 简介及其应用---推酷
Hadoop 作为MR 的开源实现,一直以动态运行解析文件格式并获得比MPP数据库快上几倍的装载速度为优势.不过,MPP数据库社区也一直批评Hadoop由于文件格式并非为特定目的而建,因此序列化和反序 ...
- 坑：jmeter部署AWS云服务器时出现连接超时Non HTTP response code: org.apache.http.conn.HttpHostConnectException
背景: jmeter脚本部署到云服务器(AWS EC2)公网上时,启动jmeter脚本运行了5个小时才运行完毕,后面发现脚本报错timeout(如图),找了很久不知道原因,后面进入脚本发现全部在报错. ...
- Cobaltstrike与Metasploit会话转换
这里只做记录,不做详解 0x00 实验环境 被控制机:192.168.126.129 Metasploit:192.168.126.128 Cobaltstrike:182...* 0x01 CS会话 ...
- 【CSP模拟赛】Confess（数学 玄学）
题目描述 小w隐藏的心绪已经难以再隐藏下去了.小w有n+ 1(保证n为偶数)个心绪,每个都包含了[1,2n]的一个大小为n的子集.现在他要找到隐藏的任意两个心绪,使得他们的交大于等于n/2. 输入描述 ...
- js注册表单中实现地区选择效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 获取当前服务的IP和端口号
package com.movitech.product.datahub.util; import org.slf4j.Logger; import org.slf4j.LoggerFactory; ...
- Jmeter5.11安装
jmeter5.11要对应jdk1.8以上版本 1.选择zip后缀进行下载 2.配置环境变量 (1)电脑桌面---->"计算机"图标---->鼠标右键选择"属 ...
- 【转】史上最强Tomcat8性能优化
https://blog.csdn.net/ThinkWon/article/details/102744033 文章目录授人以鱼不如授人以渔目的服务器资源Tomcat配置优化Linux环境安装运行T ...
- 配置mongo.conf文件
配置mongo.conf文件,优化mongod.exe的启动 在d:/Develop/MongoDB目录下创建mongo.conf文件并写入: dbpath=d:\Develop\MongoDB\ ...