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对象(不知 ...
随机推荐
- redash oracle 数据源docker 镜像
redash 官方的docker 镜像是没有包含oracle的,需要我们自己添加,参考了一个docker 镜像进行了简单的修改 Dockerfile FROM redash/redash:7.0.0. ...
- puppeteer 试用
puppeteer 是chrome 团队提供的Headless chrome node api 库,我们可以用来方便的进行chrome 操作,同时 可以做好多事情(web 爬虫,生成pdf,截图... ...
- CSPS_109
T1 状压+位运算解决 T2 打完暴力后感到了迷茫.. 不过看这张表里1的数目占了一半之多,应该合法情况挺多的 拿出了从未用过的srand(time(0)); 结果撞上正解了(笑)(rp--) 现在$ ...
- [USACO14MAR] Sabotage 二分答案 分数规划
[USACO14MAR] Sabotage 二分答案 分数规划 最终答案的式子: \[ \frac{sum-sum[l,r]}{n-len[l,r]}\le ans \] 转换一下: \[ sum[1 ...
- CTS&&APIO2019爆零记
如果你只好奇测试相关请跳至day 2 day 3 day 6 scoi 2019 之后 由于实力问题,省选的时候排名在三十多,显然是没有进队.不过可能是受过的打击比较多,所以还没有特别颓废,甚至连 ...
- 什么是Java内存模型
转载 : https://www.jianshu.com/p/bf158fbb2432 在知识星球中,有个小伙伴提了一个问题: 有一个关于JVM名词定义的问题,说”JVM内存模型“,有人会说是关于JV ...
- MySQL 自动插入、更新时间戳
在 MySql 中,要做到自动出入当前时间戳,只要在定义表格时将字段的默认值设置为 CURRENT_TIMESTAMP 即可. 如: create table if not exists my_tab ...
- intellij ide 集成cmder
1.环境变量配置: https://github.com/cmderdev/cmder/wiki/Setting-up-Environment-Variables 2.intellijide的配置:h ...
- 【转】谈谈servlet、spring、struts
今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架由struts2迁移到springMVC,我突然有了一个新的疑 ...
- mysql 常用字符串操作
SET @L=16, @i=3;SELECT *,CONCAT( LEFT(tag2,@i-1) ,'W', RIGHT(tag2,@L-@i)) from tb_main LIMIT 1,10;