HTML代碼： 需引入layui.css代碼 <!-- 左側(cè)的菜單 --> <div class="layui-side layui-bg-black" id="admin-side"><div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side"> </div> </div> <!-- 右側(cè)tab選項卡和內(nèi)容 --> <div class="layui-body" style="bottom: 0;border-left: solid 2px #1AA094;" id="admin-body"><div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab" lay-allowclose="true"><ul class="layui-tab-title"> <!-- tab選項卡標(biāo)題 --><li class="layui-this"><i class="fa fa-dashboard" aria-hidden="true"></i><cite>控制面板</cite></li></ul><div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;"> <!-- tab選項卡內(nèi)容 --><div class="layui-tab-item layui-show"><iframe src="main.html"></iframe></div></div></div> </div> js代碼：需引入 layui.all.js var $ = layui.jquery,element = layui.element(),form = layui.form(); var html = ''; //獲取菜單 $.ajax({url:"../manage/permissionList?type=1",type:"post",dataType:"json",data:{},success:function(data){var navs=data.result;$.each(navs,function(i,item){html += '<dl>';html += '<dt><a href="javascript:;" data-url="'+item.url+'" nav-id="'+item.id+'"><i class="'+item.icon+'"></i><cite>'+item.title+'</cite></a></dt>';//如果有第二級菜單if(item.children !== undefined && item.children.length > 0){$.each(item.children,function(j,item2){html += '<dd>';html += '<a href="javascript:;" data-url="'+item2.url+'" nav-id="'+item2.id+'"><i class="'+item2.icon+'"></i><cite>'+item2.title+'</cite></a>';//如果有三級菜單if(item2.children !== undefined && item2.children.length > 0){html += '<ul>';$.each(item2.children,function(k,item3){html += '<li>'+'<a href="javascript:;" data-url="'+item3.url+'" nav-id="'+item3.id+'">'+'<i class="'+item3.icon+'"></i>'+'<cite>'+item3.title+'</cite>'+'</a>'+'</li>';});html += '</ul>';}html += '</dd>';});}html += '</dl>';});//渲染html$('#admin-navbar-side').html(html); } });//觸發(fā)事件 var active = {tabAdd: function(obj){//新增一個Tab項element.tabAdd('admin-tab', {title: $(this).html()//用于演示,content: '<iframe src="'+$(this).attr('data-url')+'"></iframe>'});element.tabChange("admin-tab", $('.layui-tab-title li').length - 1); },tabDelete: function(index) { //刪除指定Tab項 element.tabDelete('admin-tab', index); //刪除（注意序號是從0開始計算） },tabChange: function(lay_id){//切換到指定Tab項element.tabChange('admin-tab', lay_id); //切換到：用戶管理} }; //添加tab $(document).on('click','a',function(){if(!$(this)[0].hasAttribute('data-url') || $(this).attr('data-url')==='')return;var title = $.trim($(this).text()); var tabs = $(".layui-tab-title").children(); for(var i = 0; i < tabs.length; i++) {if($(tabs).eq(i).children('cite').text() == title) {element.tabChange('admin-tab', i); return;} }active["tabAdd"].call(this);resize();active.tabChange($(".layui-tab-title").children().length - 1); });//iframe自適應(yīng) function resize(){var $content = $('.admin-nav-card .layui-tab-content');$content.height($(this).height() - 147);$content.find('iframe').each(function() {$(this).height($content.height());}); } $(window).on('resize', function() {var $content = $('.admin-nav-card .layui-tab-content');$content.height($(this).height() - 147);$content.find('iframe').each(function() {$(this).height($content.height());}); }).resize();//toggle左側(cè)菜單 $('.admin-side-toggle').on('click', function() {var sideWidth = $('#admin-side').width();if(sideWidth === 200) {$('#admin-body').animate({left: '0'}); //admin-footer$('#admin-footer').animate({left: '0'});$('#admin-side').animate({width: '0'});} else {$('#admin-body').animate({left: '200px'});$('#admin-footer').animate({left: '200px'});$('#admin-side').animate({width: '200px'});} }); $(document).on('click','dt',function(){$(this).parent().find('dd').toggle(); }); $(document).on('click','dd a',function(){$(this).next('ul').toggle(); });

總結(jié)

以上是生活随笔為你收集整理的layui自定义ajax左侧三级菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。