html代码：
<div id="navBarId" class="layui-side layui-bg-black" lay-filter="test"></div>
<div class="layui-body" style="overflow-y: hidden;">
<!-- 内容主体区域 -->
<div class="layui-tab" lay-filter="demo" lay-allowClose="true">
<ul class="layui-tab-title" style="margin-top: -32px;"></ul>
<div class="layui-tab-content"></div>
</div>
</div>`
js代码：
// 导航菜单的间隔像素
var menuCell = 5;
layui.use('element', function () {
var element = layui.element;
var $ = layui.jquery;
//获取所有的菜单
$.ajax({
type: "GET",
url: "static/js/newMenu.json",
dataType: "json",
success: function (data) {
var liStr = "";
// 遍历生成主菜单
for (var i = 0; i < data.length; i++) {
//console.log("--> "+JSON.stringify(data[i]));
// 判断是否存在子菜单
if (data[i].childMenus != null && data[i].childMenus.length > 0) {
// console.log("--> " + JSON.stringify(data[i].childMenus));
liStr += "<li class=\"layui-nav-item\"><a class=\"\" href=\"javascript:;\" data-src=\"" + data[i].url + "\" data-menuid=\"" + data[i].menuId + "\" data-title=\"" + data[i].name + "\">" + data[i].name + "</a>\n" +
"<dl class=\"layui-nav-child\">\n";
// 遍历获取子菜单
for (var k = 0; k < data[i].childMenus.length; k++) {
liStr += getChildMenu(data[i].childMenus[k], 0);
}
liStr += "</dl></li>";
} else {
liStr += "<li class=\"layui-nav-item\"><a class=\"site-demo-active\" data-src=\"" + data[i].url + "\" data-menuid=\"" + data[i].menuId + "\" data-title=\"" + data[i].name + "\">" + data[i].name + "</a></li>";
}
};
$("#navBarId").html("<ul class=\"layui-nav layui-nav-tree\" lay-filter=\"test\">\n" + liStr + "</ul>");
element.init();
},
error: function (jqXHR) {
// layer aler("发生错误：" + jqXHR.status);
}
});
});
// 递归生成子菜单
function getChildMenu(subMenu, num) {
// console.log("num: " + num);
num++;
var subStr = "";
if (subMenu.childMenus != null && subMenu.childMenus.length > 0) {
subStr += "<dd><ul><li class=\"layui-nav-item\" ><a style=\"margin-Left:" + num * menuCell + "px\" class=\"site-demo-active\" href=\"javascript:;\" data-src=\"" + subMenu.url + "\" data-menuid=\"" + subMenu.menuId + "\" data-title=\"" + subMenu.name + "\">" + subMenu.name + "</a>" +
"<dl class=\"layui-nav-child\">\n";
for (var j = 0; j < subMenu.childMenus.length; j++) {
subStr += getChildMenu(subMenu.childMenus[j], num);
}
subStr += "</dl></li></ul></dd>";
} else {
subStr += "<dd><a style=\"margin-Left:" + num * menuCell + "px\" class=\"site-demo-active\" data-src=\"" + subMenu.url + "\" data-menuid=\"" + subMenu.menuId + "\" data-title=\"" + subMenu.name + "\">" + subMenu.name + "</a></dd>";
}
return subStr;
}
function xuanran() {
layui.use(['element', 'layer'], function () {
var element = layui.element;
layer = layui.layer;
var layFilter = $("#navBarId").attr('lay-filter');
element.render('nav', layFilter);
var active = {
//在这里给active绑定几项事件，后面可通过active调用这些事件
tabAdd: function (url, id, title) {
//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
// var body_url = "pages/" + url + ".html";
var body_url = url;
// console.log("要切换的页面地址=" + body_url);
element.tabAdd('demo', {
title: title,
content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + body_url + '"></iframe>',
id: id //规定好的id
})
FrameWH(); //计算ifram层的大小
},
tabChange: function (id) {
//切换到指定Tab项
element.tabChange('demo', id); //根据传入的id传入到指定的tab项
},
tabDelete: function (id) {
element.tabDelete("demo", id);//删除
}
};
// //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
$('.site-demo-active').on('click', function () {
var dataid = $(this);
if (dataid.children().length <= 1) {
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//如果比零小，则直接打开新的tab项
// console.log("没有tab页，新建tab页");
// console.log(dataid.attr("data-src"))
active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
} else {
//否则判断该tab项是否以及存在
var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
if ($(this).attr("lay-id") == dataid.attr("data-menuId")) {
// console.log("如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开");
isData = true;
}
})
if (isData == false) {
//标志为false 新增一个tab项
// console.log("新增一个tab项")
active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
}
}
//最后不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(dataid.attr("data-menuId"));
}
});
})
// console.log("==列表添加完后再次执行渲染");
}
xuanran()
/*
* @todo 重新计算iframe高度
*/
function FrameWH() {
var h = $(window).height() - 164;
//console.log("高度问题=="+h);
$("iframe").css("height", h + "px");
}
自己写的json数据：
[
{
"menuId": 1,
"spread": true,
"name": "系统设置",
"url": "test.html",
"childMenus": [
{
"name": "权限模块",
"url": "page/table.html",
"childMenus": null
}
]
},
{
"menuId": 2,
"spread": true,
"name": "业务系统",
"url": "test.html",
"childMenus": [
{
"menuId": 21,
"spread": true,
"name": "销售系统",
"url": "test.html",
"childMenus": [
{
"menuId": 22,
"spread": true,
"name": "订单系统",
"url": "test.html",
"childMenus": [
{
"menuId": 23,
"spread": true,
"name": "未完成订单",
"url": "test.html",
"childMenus": [
{
"menuId": 24,
"spread": true,
"name": "服装部订单",
"url": "test.html",
"childMenus": [
{
"menuId": 241,
"spread": true,
"name": "成人部分",
"url": "test.html",
"childMenus": null
},
{
"menuId": 242,
"spread": true,
"name": "儿童部分",
"url": "test.html",
"childMenus": null
}
]
},
{
"name": "玩具部订单",
"url": "test.html",
"childMenus": [
{
"menuId": 251,
"spread": true,
"name": "成人部分",
"url": "test.html",
"childMenus": null
},
{
"menuId": 252,
"spread": true,
"name": "儿童部分",
"url": "test.html",
"childMenus": null
}
]
}
]
}
]
},
{
"menuId": 26,
"spread": true,
"name": "结算系统",
"url": "test.html",
"childMenus": null
}
]
},
{
"menuId": 3,
"spread": true,
"name": "公关系统",
"url": "test.html",
"childMenus": null
}
]
}
]
效果截图：
注：可以无限级菜单，不是原创，忘记原文链接在哪里了，这是自己修改整理过的。
1854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
