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对象(不知 ...
随机推荐
- 在nodejs中操作数据库（MongoDB和MySQL为例）
一.使用nodejs操作MongoDB数据库 ①使用官方的mongodb包来操作 ②使用第三方的mongoose包来操作(比较常用) // 首先必须使MongoDB数据库保持开启状态 // npm下载 ...
- BZOJ 3435: [Wc2014]紫荆花之恋
二次联通门 : BZOJ 3435: [Wc2014]紫荆花之恋 二次联通门 : luogu P3920 [WC2014]紫荆花之恋 /* luogu P3920 [WC2014]紫荆花之恋 怀疑人生 ...
- linux命令之------Linux文件系统具体目录
Linux文件系统具体目录 (1)/ Linux文件系统的入口,也是处于最高一级的目录 (2)/bin 系统所需要的那些命令处于此目录,比如Is,cp,mkdir等命令:功能和/usr/bin类似 ...
- 可持久化01trie树——模板
给你一个数,在一段区间内找到另一个数,使得他们的异或最大: trie树上存储每个数的二进制位,查询时贪心查询能让当前高位取得1的位置: 实际上是一个求前缀和的思想.每个数都开一个trie树浪费空间,当 ...
- React中兄弟组件传值
兄弟组件传值 实际上是间接的通过第三方来实现传值,举例,第一个儿子把值传给父亲,父亲在把这个值传给第二个儿子,这样就实现了兄弟组件传值 来看代码: 父组件代码 import React from 'r ...
- Symfony之入门学习
最近因业务需要,主要针对Edusoho进行二次开发.但是对于Symfony,我并不熟悉,我所了解的是,它的那套与我在Java中常用的开发模式MVC,本质上并不多大差异,就是所使用的语言不一样而已.下面 ...
- centos7安装mysql8 ERROR! The server quit without updating PID file
原因mysql的安装目录在/etc/my.cnf配置不正确或者目录中的文件没有权限导致的,或者日志目录没有权限导致的 使用chwon -R mysql:mysql mysql的日志目录后重启mysq ...
- photoshop 的安装破解
最近学习需要用到photoshop,但是photoshop试用期只有30天,于是尝试破解photoshop.参考了网上的很多博客,失败了好几次,终于找到一篇靠谱的博客,很顺利的成功了.在这里记录一下, ...
- UltraEdit 的“查看方式”着色类项型
UltraEdit 的“查看方式”着色类项型 2011年06月22日 13:16:00 cnki_ok 阅读数 5722 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请 ...
- Hadoop记录-Apache hadoop+spark集群部署
Hadoop+Spark集群部署指南 (多节点文件分发.集群操作建议salt/ansible) 1.集群规划节点名称 主机名 IP地址 操作系统Master centos1 192.168.0.1 C ...