json数据循环左侧三级导航菜单

HTML部分
js部分

最近，在做一套后台的管理系统，因为用到这个功能，封装了一番后，供大家参考，话不多说，直接上代码。

HTML部分

            <ul class="nav" id="side-menu"></ul>

js部分

ajax已写好，暂无数据接口，先模拟后台json数据代码如下：
导航现在为三级目录，层级目录可根据自己需要添加判断。

var menuJson=[ {"title":"主页","url":"#","icon":"fa fa-home"},{"title":"会员管理",        "url":"#",                  "icon":"fa fa-list",        "children":[{ "title":"会员列表",     "url":"vipShow.html","icon":"2222",         },{ "title":"模块接入","url":"file_manager.html","icon":"2222",},{ "title":"jqGrid","url":"table_jqgrid.html","icon":"2222",},{ "title":"Foo Tables","url":"table_foo_table.html","icon":"2222",}]},{"title":"系统设置",            //一级导航名称"url":"#",                  //一级导航链接"icon":"fa fa-cog",         //一级导航图标"children":[              //一级导航子级{ "title":"导航管理",   //二级导航名称"url":"",           //二级导航链接"icon":"2222",      //二级导航图标"children":[      //二级导航子级{"title":"导航列表",    //三级导航名称"url":"nav/show.html",  //三级导航链接"icon":"333",           //三级导航子级}]},{ "title":"模块管理","url":"","icon":"2222","children":[{"title":"模块列表","url":"module/show.html","icon":"333",}]},]}
]//获取菜单 如有接口可配置接口，如无接口请注释$.ajax({url:"",type:"post",dataType:"json",data:json,success:function(data){}});//循环列表var html ="" //创建一个容器，把循环出来的数据装到此对象数组中$.each(menuJson,function(i,item){//循环返回的数据html += '<li>';//如果第一级菜单有children参数，就继续循环第二级if(item.children != undefined && item.children.length > 0){html += '<a href="'+item.url+'"><i class="'+item.icon+'"></i><span class="nav-label">'+item.title+'</span><span class="fa arrow"></span></a>';$.each(item.children,function(j,item2){html += '<ul class="nav nav-second-level">';//如果有二级菜单有children，就继续循环第三级if(item2.children!= undefined && item2.children.length > 0){html += '<li>'+'<a href="'+item2.url+'" class="J_menuItem"><i class="'+item2.icon+'"></i> <span class="nav-label">'+item2.title+'</span><span class="fa arrow"></span></a>';html += '<ul class="nav nav-third-level">';//只循环到第三级，可根据需求，自己添加循环$.each(item2.children,function(k,item3){html += '<li>'+'<a class="J_menuItem" href="'+item3.url+'">'+item3.title+'</a>'+'<li>';});html += '</ul>';}else{html += '<li>'+'<a href="'+item2.url+'" class="J_menuItem"><i class="'+item2.icon+'"></i> <span class="nav-label">'+item2.title+'</span></a>';}html += '</li></ul>';});}else{html += '<a href="'+item.url+'"><i class="'+item.icon+'"></i><span class="nav-label">'+item.title+'</span></a>';}html += '</li>';
});
//将对象数组的内容在页面id为side-menu的容器里面渲染出来。
$('#side-menu').html(html);

只提供了菜单循环方法，具体样式修改，需根据需求自己调整。如有问题可微信咨询互相学习哦W827306356

json数据循环左侧三级导航菜单相关推荐

java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
html仿写京东左侧,jQuery模仿京东/天猫商品左侧分类导航菜单效果
现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事 ...
原生JS 将json数据循环遍历到HTML中
原生JS 将数组的数据循环遍历到HTML中 html如下(图片地址为本地保存的)<div id="article"><!-- <div class=&quo ...
微信小程序（四）json数据循环展示
html部分 <view class='list-head'>列表测试</view> <view class='list-box'><view class=' ...
PHP淘宝左侧商品分类,jQuery电商网站左侧商品分类导航菜单代码
js代码 $(function() { var $top = $('.sec-mainNav').offset().top + $('.sec-mainNav').height() //左侧导航动画 ...
asp+access返回json数据+layui select下拉菜单联动展示实例
前端:x-admin框架后端:asp+access数据库(vbscript) 首先这个实例是用vb写的,是asp不是asp.net aspx与asp是不同的,asp是一个运行环境,默认的脚本语言是v ...
easyui左侧导航菜单右侧载入百度地图项目框架
代码下载 http://pan.baidu.com/s/1cDht7K 一个左侧是导航菜单,右侧是百度地图的应用: 一左侧菜单使用jquery easyui框架:网上下的资源:运行后如下: 二修 ...
js三级分类菜单导航
原理很简单:点击标题的时候把子目录的id传给js函数,然后js函数判断是打开还是关上子目录. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
【前端学习日记】ElementUi+导航菜单+面包屑+Tag标签联动
目录导航菜单的渲染路由跳转联动面包屑标签联动总结思路:导航菜单是负责路由跳转的,面包屑和Tags标签通过读取事件路由跳转的数据进行渲染,这里涉及到组件间通信,使用vuex状态管理器来管理这部 ...
html5处理json数据,js解析json数组
js读取解析JSON类型数据 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 Jav ...

json数据循环左侧三级导航菜单

json数据循环左侧三级导航菜单

HTML部分

js部分

json数据循环左侧三级导航菜单相关推荐

最新文章

热门文章