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对象(不知 ...
随机推荐
- velero 备份、迁移 kubernetes 应用以及持久化数据卷
velero 是heptio 团队开源的kubernetes 应用以及持久化数据卷备份以及迁移的解决方案,以前的名字为ark 包含以下特性: 备份集群以及恢复 copy 当前集群的资源到其他集群 复制 ...
- Vigil 发送多人邮件通知的处理
Vigil 默认是只能发送单人邮件,但是我们有需要发送多个的场景. 解决方法: 大家使用一样的账户登陆 使用邮件组 修改下源码 为了学习下Vigil 的构建,以及原理,我简单通过修改源码的方式(目前支 ...
- zabbix显示 get value from agent failed:cannot connetct to xxxx:10050:[4] interrupted system call
在阿里云上部署的两台云主机,从server上 agent.ping不通agent10050端口,在agent上使用firewalld-cmd 添加了10050端口还不行,关闭了防火墙和selinux也 ...
- (9)Go指针
区别于C/C++中的指针,Go语言中的指针不能进行偏移和运算,是安全指针. 要搞明白Go语言中的指针需要先知道3个概念:指针地址.指针类型和指针取值. Go语言中的指针 任何程序数据载入内存后,在内存 ...
- leetcode题目讲解（Python）：字符串转整数 (atoi)
分析这道题,输入数据有如下几种情况: 第一类:输入字符串无法转换为整数 这一类包含以下几种情况: 输入字符串为空 开头字符为数字.符号(+,-).空格以外的字符 有多个加减符号的字符串 符号没有紧跟数 ...
- mysql 存储过程 REPEAT ... UNTIL ... END REPEAT
begin declare b int; declare use_no varchar(10); declare use_name varchar(400); decla ...
- vue+Element 后台管理骨架
1.使用的是vue-cli 3.0起的 2.文件目录结构 3.整体的骨架是根据element 文档里头的Container容器布局来的(复制粘贴,喜欢什么色儿就改) aside这个 部分需要注意的是这 ...
- Jquery创建动态表单
$(document).ready(function(){ $("#button1").click(function(){ //获取html <body></bo ...
- 关于java nio的channel读写的一个困惑
这里提的需求基本都是IM的,IM的解决方案是怎么样的? 网上的需求: 1. 某一用户发了一条信息, 需要服务器反回一个信息(这种最简单) 2. 某一用户发了一条信息,需要服务器广播给所有客户端 3. ...
- Web.config 文件例子
php - 如何使用web.config重写IIS UrlRewriteModule中的网页的URL? <?xml version="1.0" encoding=" ...