jquery多级菜单列表

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_41913666/article/details/89520353

团队需要，就写了一份n级菜单加载。只是给大家一个思路吧。标签都是开源demo上的。

var loadLayerMenu=function()
{
	var tempName="三级菜单";
	//标题；
	var menu="<a href=\"consumer-equipment1.1.1.1.html\"><i class=\"mdi mdi-home\"></i> 用户</a>"; 
	var title=$("<li class=\"nav-item active\"></i>").append(menu); 
	$("ul.nav-drawer").append(title); //拿到ul标签并插入数据；
	
	/*循环插入标签定义*/
	//多级标签定义
	var submenu_li="<li class=\"nav-item nav-item-has-subnav\"></li>";
	var submenu_a="<a href=\"javascript:void(0)\" onclick=\"QHS(this.name)\" name=\"name3\"><i class=\"mdi mdi-menu\"></i> 多级菜单1</a>";
	var submenu_ul="<ul class=\"nav nav-subnav\"></ul>";
	//单独标签定义
	var onlySubmenu="<li><a href=\"#!\" onclick=\"QHS(this.name)\" name=\"name3\">"+tempName+"</a></li>";
	//循环模拟插入
	for(var i=0;i<4;i++)
	{
		if(i==1||i==3){
			$("ul.nav-drawer").append(submenu_li);  
			$("li.nav-item-has-subnav").append(submenu_a);
			$("li.nav-item-has-subnav").append(submenu_ul);
		}else{
			$("ul.nav-subnav").append(onlySubmenu);
		}
	}
}

下面是测试网址。加入function和<ul class="nav nav-drawer"></ul>

http://www.w3school.com.cn/tiy/t.asp?f=jquery_html_append2