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对象(不知 ...
随机推荐
- CSS3背景图片（多重背景、起始位置、裁剪、尺寸）
一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...
- HTML5 离线应用
一.离线应用cache manifes文件 HTML5中构建了一个离线(无网络状态)应用,只需创建一个cache manifest文件 可以配置需要的缓存的资源,网络无连接应用任然可以使用,本地读取缓 ...
- SQL基础-连接表
一.连接表 1.SQL JOIN 忘记在哪保存的某位网友的图,先明白SQL JOIN, 2.关于笛卡尔积 笛卡尔积: 两个集合的乘积 重新建student表和teacher表: student表: C ...
- POI报表打印
一.Excel报表(POI) 1.需求说明 在企业级应用开发中,Excel报表是一种最常见的报表需求.Excel报表开发一般分为两种形式: 1.为了方便操作,基于Excel的报表批量上传数据 2.通过 ...
- 大数据应用期末总评（hadoop综合大作业）
作业要求源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/3363 一.将爬虫大作业产生的csv文件上传到HDFS (1)在/usr ...
- Java 强，弱，软，虚 引用
import java.lang.ref.SoftReference; import java.lang.ref.WeakReference; public class TestGC { /** * ...
- server2003 IIS6.0 网站不可用
事件 ID ( 487 )的描述(在资源( Zend Optimizer )中)无法找到.本地计算机可能没有必要的注册信息或消息 DLL 文件来从远程计算机显示消息.您可能可以使用 /AUXSOURC ...
- C# 获取文件扩展信息-应用名称/作者等
方案一:使用微乳封装的Shell包 添加nuget包:Microsoft.WindowsAPICodePack.Shell using Microsoft.WindowsAPICodePack.She ...
- CocosCreator之打包android
1:准备资料 1:sdk,下载地址http://www.androiddevtools.cn/ 2:jdk下载地址http://www.oracle.com/technetwork/Java/java ...
- 025批量删除mac文件名中的空格
一. 在准备王陆语料库资料时发现给的录音文件好多带有空格,不喜欢这样的,而且不方面mac下搜索和查找,所以想把它全部删掉,命令如下: find . -name "* *"| whi ...