layui-左侧递归菜单-js实现

完整代码两种下拉风格

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link href="lib/layui/css/layui.css" rel="stylesheet" /><!--    <link href="css/layout-admin.css" rel="stylesheet"/>--></head><body class="layui-bg-gray"><div class="layui-side"><div class="layui-side-scroll"><div id="test"></div></div></div><!--<div id="test"></div>--><script src="lib/layui/layui.js"></script><script>layui.use(["element", "dropdown"], function () {var element = layui.element;var dropdown = layui.dropdown;var util = layui.util;// 假设我们有一个菜单数据var menuData = {code: 0,data: [{id: 1,parentId: 0,name: "test-1",weight: 1,url: "https://blog.csdn.net/weixin_42164004/article/details/115178178",type: "link",children: [{id: 2,parentId: 1,name: "test-2",weight: 2,url: "https://blog.csdn.net/weixin_42164004/article/details/115178178",type: "link",children: [{id: 3,parentId: 2,name: "test-3",weight: 3,url: "https://blog.csdn.net/weixin_42164004/article/details/115178178",type: "link",children: [{id: 4,parentId: 3,name: "test-4",weight: 4,url: "https://blog.csdn.net/weixin_42164004/article/details/115178178",type: "link",},],},],},],},],count: 1,};function buildMenu(id, data) {let type = "group";function buildMenuTree(items) {function isArray(obj) {return typeof obj === "object" && Array.isArray(obj);}function isNotNullArray(obj) {if (isArray(obj)) {return obj.length > 0;}return false;}let html = [];for (let i = 0; i < items.length; i++) {let item = items[i];if (isNotNullArray(item.children)) {if (type === "group") {html.push('<li class="layui-menu-item-group layui-menu-item-up"><div class="layui-menu-body-title"><span>' +item.name +"</span></div><ul>" +buildMenuTree(item.children) +"</ul></li>");} else if (type === "parent") {html.push('<li class="layui-menu-item-parent layui-menu-item-up"><div class="layui-menu-body-title"><span>' +item.name +'</span> <i class="layui-icon layui-icon-right"></i></div> <div class="layui-panel layui-menu-body-panel" style="width: 200px;"><ul>' +buildMenuTree(item.children) +"</ul></div></li>");}} else {html.push('<li><div class="layui-menu-body-title"><span>' +item.name +"</span></div></li>");}}return html.join();}let html = "";if (type === "group") {html ='<ul class="layui-menu" id="left-menu" lay-filter="left-menu" lay-accordion>' +buildMenuTree(data) +"</ul>";} else if (type === "parent") {html ='<div class="layui-panel" style="width: 200px;margin: 16px"><ul class="layui-menu" id="left-menu" lay-filter="left-menu" lay-accordion>' +buildMenuTree(data) +"</ul></div>";}document.getElementById(id).innerHTML = html;}buildMenu("test", menuData.data);//element.init();});</script></body>
</html>

freemarker模板引擎实现对管理后台均可，因为并不需要seo

[#ftl encoding="utf-8"]
[#--递归下拉菜单--]
[#macro list items][#list items][#items as item][#if item.children?? && item.children?size gt 0 ]<li class="layui-menu-item-group layui-menu-item-up"lay-options="{id: '${item.id}', parentId: '${item.parentId}', isTab: false, url:'${item.url}', type:'${item.type}'}"><div class="layui-menu-body-title"><span>${item.name}</span></div><ul>[@list items=item.children /]</ul></li>[#else]<li lay-options="{id: '${item.id}', parentId: '${item.parentId}', isTab: true, url:'${item.url}', type:'${item.type}'}"><div class="layui-menu-body-title"><span>${item.name}</span></div></li>[/#if][/#items][/#list]
[/#macro]<div class="side"><ul class="layui-menu layui-menu-lg" id="left-menu" lay-filter="left-menu">[@list items= leftMenu /]</ul>
</div><script>layui.use(function () {const dropdown = layui.dropdown;const element = layui.element;const layer = layui.layer;const $ = layui.jquery;function reportWindowSize(event) {const height = $('.layui-body').height() - $('.layui-tab-title').height() - $('.layui-footer').height();setTimeout(function () {$('.tab-page').css('height', height);}, 100);}window.addEventListener("resize", reportWindowSize);dropdown.on('click(left-menu)', function (options) {if (options.isTab === true) {let exist = false;let layId = options.id.toString();let $li = $('.layui-tab-title li');$li.each(function () {if ($(this).attr('lay-id') === layId) {exist = true;}});if (!exist) {if ($li.length >= 20) {return;}element.tabAdd("tab-card", {title: options.title,content: '<div id="tab-page-' + layId + '" class="tab-page"></div>',id: layId,change: true});reportWindowSize(null);console.log(options.type);if (options.type === 'page') {$('#page-' + layId).load(options.url,{id: options.id},function (responseTxt, statusTxt, xhr) {if (statusTxt === "success") {} else if (statusTxt === "error") {layer.alert(options.title + '，加载失败！');element.tabDelete('tab-card', layId);}});} else if (options.type === 'link') {$('#tab-page-' + layId).html('<iframe title="'+options.title+'" src="' + options.url + '" style="width: 100%;height: 100%;border: none;scrollbar-width=none" scrolling="no">')}} else {element.tabChange('tab-card', layId);}}});});
</script>