版权声明:本文为博主原创文章,未经博主允许不得转载。 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>