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

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

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