Layui实现无限极菜单

第一步 修改fsMenu.js文件

/**
 * @Description: 菜单配置
 * @Copyright: 2017 wueasy.com Inc. All rights reserved.
 * @author: fallsea
 * @version 1.8.4
 * @License：MIT
 */
layui.define(['element',"fsConfig","fsCommon"], function(exports){
	var menuConfig = {
			dataType : "server" , //获取数据方式，local本地获取，server 服务端获取
			loadUrl : "", //加载数据地址
			method : "post",//请求类型，默认post
			rootMenuId : "0", //根目录菜单id
			defaultSelectTopMenuId : "menu_2", //默认选中头部菜单id
			defaultSelectLeftMenuId : "1", //默认选中左边菜单id
			menuIdField : "MENU_ID", //菜单id
			menuNameField : "MENU_NAME", //菜单名称
			menuIconField : "MENU_ICON" , //菜单图标，图标必须用css
			menuHrefField : "MENU_URL" , //菜单链接
			parentMenuIdField : "PARENT_ID" ,//父菜单id
			/*data : [
				{"menuId":"1","menuName":"控制台","menuIcon":"fa-cog","menuHref":"","parentMenuId":0},
				{"menuId":"2","menuName":"测试","menuIcon":"","menuHref":"","parentMenuId":0},
				{"menuId":"11","menuName":"案例","menuIcon":"fa-table","menuHref":"","parentMenuId":1},
				{"menuId":"12","menuName":"其他页面","menuIcon":"","menuHref":"","parentMenuId":"1"},
				{"menuId":"111","menuName":"首页","menuIcon":"","menuHref":"views/home/index.html","parentMenuId":"11"},
				{"menuId":"datagrid","menuName":"数据表格","menuIcon":"fa-list","menuHref":"views/datagrid/index.html","parentMenuId":"11"},
				{"menuId":"datagrid2","menuName":"数据表格2","menuIcon":"fa-list","menuHref":"views/datagrid2/index.html","parentMenuId":"11"},
				{"menuId":"treeDatagrid","menuName":"树+表格","menuIcon":"fa-list","menuHref":"views/treeDatagrid/index.html","parentMenuId":"11"},
				{"menuId":"multiDatagrid","menuName":"多数据表格","menuIcon":"fa-list","menuHref":"views/multiDatagrid/index.html","parentMenuId":"11"},
				{"menuId":"tabDatagrid","menuName":"tab数据表格","menuIcon":"fa-list","menuHref":"views/tabDatagrid/index.html","parentMenuId":"11"},
				{"menuId":"complexDatagrid","menuName":"复杂数据表格","menuIcon":"fa-list","menuHref":"views/complexDatagrid/index.html","parentMenuId":"11"},
				{"menuId":"linkageDatagrid","menuName":"联动数据表格","menuIcon":"fa-list","menuHref":"views/linkageDatagrid/index.html","parentMenuId":"11"},
				{"menuId":"linkageDatagrid2","menuName":"联动数据表格(复杂)","menuIcon":"fa-list","menuHref":"views/linkageDatagrid2/index.html","parentMenuId":"11"},
				{"menuId":"staticDatagrid","menuName":"表格数据提交","menuIcon":"fa-list","menuHref":"views/staticDatagrid/index.html","parentMenuId":"11"},
				{"menuId":"121","menuName":"404","menuIcon":"","menuHref":"404.html","parentMenuId":"12"},
				{"menuId":"21","menuName":"基本元素","menuIcon":"","menuHref":"","parentMenuId":"2"},
				{"menuId":"22","menuName":"徽章","menuIcon":"","menuHref":"http://www.layui.com/demo/badge.html","parentMenuId":"2"},
				{"menuId":"23","menuName":"数据表格","menuIcon":"","menuHref":"http://www.layui.com/demo/table.html","parentMenuId":"2"},
				{"menuId":"211","menuName":"按钮","menuIcon":"","menuHref":"http://www.layui.com/demo/button.html","parentMenuId":"21"},
				{"menuId":"212","menuName":"表单","menuIcon":"","menuHref":"http://www.layui.com/demo/form.html","parentMenuId":"21"},
				{"menuId":"213","menuName":"选项卡","menuIcon":"","menuHref":"http://www.layui.com/demo/tab.html","parentMenuId":"21"}
		 ] //本地数据
*/	};
	var element = layui.element,
	fsCommon = layui.fsCommon,
	fsConfig = layui.fsConfig,
	statusName = $.result(fsConfig,"global.result.statusName","errorNo"),
    msgName = $.result(fsConfig,"global.result.msgName","errorInfo"),
	successNo = $.result(fsConfig,"global.result.successNo","0"),
    dataName = $.result(fsConfig,"global.result.dataName","results.data"),
	FsMenu = function (){

	};
	



	FsMenu.prototype.render = function(){

		this.loadData();
		this.showMenu();
		this.expandMenu();
	};
	
	

	/**
	 * 加载数据
	 */
	FsMenu.prototype.loadData = function(){

		if(menuConfig.dataType == "server"){//服务端拉取数据

			var url = menuConfig.loadUrl;
			if($.isEmpty(url)){
				fsCommon.errorMsg("未配置请求地址！");
				return;
			}

			fsCommon.invoke(url,{},function(data){
  			if(data[statusName] == successNo)
  			{
  				menuConfig.data = $.result(data,dataName);
  			}
  			else
  			{
  				//提示错误消息
  				fsCommon.errorMsg(data[msgName]);
  			}
  		},false,menuConfig.method);

		}

	}


	/**
	 * 获取图标
	 */
	FsMenu.prototype.getIcon = function(menuIcon){

		if(!$.isEmpty(menuIcon)){

			if(menuIcon.indexOf(") == 0){
				return menuIcon;
			}else if (menuIcon.indexOf("&#") == 0){
				return ''+menuIcon+'';
			}else if (menuIcon.indexOf("fa-") == 0){
				return '+menuIcon+'">';
			}else {
				return '+menuIcon+'">';
			}
		}
		return "";
	};

	/**
	 * 清空菜单
	 */
	FsMenu.prototype.cleanMenu = function(){
		$("#fsTopMenu").html("");
		$("#fsLeftMenu").html("");
	}
		
	/**
	 * 显示菜单
	 */
	FsMenu.prototype.showMenu = function(){
		//显示顶部一级菜单
		var thisMenu = this;
		var fsTopMenuElem = $("#fsTopMenu");
		var fsLeftMenu = $("#fsLeftMenu");
		var dataList = menuConfig.data;
		var headList = dataList.filter(item => item.PARENT_ID == "0");
		
		$.each(headList,function(){
			if(menuConfig.rootMenuId == this.PARENT_ID){
				var topStr = '
;
				if(!$.isEmpty(menuConfig.defaultSelectTopMenuId) && menuConfig.defaultSelectTopMenuId == this.MENU_ID){//默认选中处理
					topStr += ' layui-this';
				}
				topStr += '" dataPid="'+this.MENU_ID+'">'+thisMenu.getIcon(this.MENU_ICON)+' '+this.MENU_NAME+'
';
				fsTopMenuElem.append(topStr);
			}
		});
		var fsLeftMenuStr = '';
		var menuList = dataList.filter(item => item.PARENT_ID != "0");
		$.each(menuList,function(){
			if(this.hasMenu && this.MENU_STATE == 1){
				var PARENT_ID = "menu_" + this.MENU_TYPE;
				var rootStr = '
+PARENT_ID+'" style="display: none;">'+
		          '+this.MENU_URL+';">'+thisMenu.getIcon(this.MENU_ICON)+this.MENU_NAME+'
';
				$.each(this.subMenu,function(){
					this.num = 1;
					rootStr += thisMenu.getMenuStr(this, "");
				});
		         rootStr += '
';
		         fsLeftMenuStr += rootStr;
			}
		});
		fsLeftMenu.append(fsLeftMenuStr);
		element.render("nav");
		
	};
	
	function getEmptySty(num){
		var str = "";
		for(var i = 0; i < num; i++){
			str +="  ";
		}
		return str;
	}
	
	FsMenu.prototype.getMenuStr = function(currentMenu, str){
		if(currentMenu.hasMenu && currentMenu.MENU_STATE == 1){
			var thisMenu = this;
			if(currentMenu.subMenu == null || currentMenu.subMenu.length == 0){
				return '
+currentMenu.MENU_ID+'" dataUrl="'+currentMenu.MENU_URL+'">'+getEmptySty(currentMenu.num)+thisMenu.getIcon(currentMenu.MENU_ICON)+currentMenu.MENU_NAME+'
';
			}
			var tempStr = '
+currentMenu.MENU_URL+';">'+getEmptySty(currentMenu.num)+thisMenu.getIcon(currentMenu.MENU_ICON)+currentMenu.MENU_NAME+'
';
			$.each(currentMenu.subMenu,function(){
				this.num = currentMenu.num + 1;
				tempStr += thisMenu.getMenuStr(this, str);
			});
			tempStr += '
';
			return tempStr;
		}
		return "";
	}
	
	
	
	FsMenu.prototype.expandMenu = function() {
       var element = layui.element, $ = layui.jquery;
        $("li.menu_more a.menu_a").on("click", function () {
        	if ($(this).next("dl").is(":hidden")) {
               $(this).next("dl").show();
               $(this).children(":last").removeClass("layui-nav-down");
               $(this).children(":last").addClass("layui-nav-up");
            }
            else {
                $(this).next("dl").hide();
                $(this).children(":last").removeClass("layui-nav-up");
                $(this).children(":last").addClass("layui-nav-down");
            }
        });};
	
	

	var fsMenu = new FsMenu();
	exports("fsMenu",fsMenu);
});

第二步

在首页新增样式文件

.layui-nav-span{
	border-width: 6px;
	position: absolute;
  	right: 10px;
}

.layui-nav-up{
	margin-top: 14px;
	border-style:dashed dashed solid;
	border-color: transparent transparent #fff;
}

.layui-nav-down{
	margin-top: 20px;
	border-style:solid dashed dashed;
	border-color: #fff transparent transparent;
}