layui自定义ajax左侧三级菜单的示例分析-创新互联

这篇文章主要介绍了layui自定义ajax左侧三级菜单的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联成立于2013年,是专业互联网技术服务公司,拥有项目成都做网站、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元余干做网站,已为上家服务,为余干各地企业和个人服务,联系电话:028-86922220

HTML代码: 需引入layui.css代码



 
  
  
 
                  

 
  
 
 
 控制面板
 
 
  
 
 
 
 
 

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 += '
';  html += '
'+item.title+'
';  //如果有第二级菜单  if(item.children !== undefined && item.children.length > 0){  $.each(item.children,function(j,item2){   html += '
';   html += ''+item2.title+'';   //如果有三级菜单   if(item2.children !== undefined && item2.children.length > 0){   html += '
    ';   $.each(item2.children,function(k,item3){   html += '
  • '+    ''+    ''+    ''+item3.title+''+    ''+    '
  • ';   });   html += '
';   }   html += '
';  });  }  html += '
';  });  //渲染html  $('#admin-navbar-side').html(html);   } });   //触发事件 var active = {  tabAdd: function(obj){   //新增一个Tab项   element.tabAdd('admin-tab', {   title: $(this).html()//用于演示   ,content: ''   });   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自适应 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左侧菜单 $('.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(); });

感谢你能够认真阅读完这篇文章,希望小编分享的“layui自定义ajax左侧三级菜单的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站题目:layui自定义ajax左侧三级菜单的示例分析-创新互联
文章路径:http://pwwzsj.com/article/hscec.html

其他资讯