layui自定义ajax左侧三级菜单
前端  /  管理员 发布于 4年前   437
本文实例为大家分享了layui自定义ajax左侧三级菜单的具体代码,供大家参考,具体内容如下
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 += '
'; }); //渲染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();});- '+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 += '
'; }); } html += ''; $.each(item2.children,function(k,item3){ html += '
'; } html += '- '+ ''+ ''+ ''+item3.title+''+ ''+ '
'; }); html += '以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
- 基于Layui自定义模块的使用方法详解
上一条:
layui递归实现动态左侧菜单
下一条:
layui实现左侧菜单点击右侧内容区显示Top
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
- gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
- 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
- Laravel从Accel获得5700万美元A轮融资(0个评论)
- 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布!(0个评论)
- Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
- 近期评论
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
- 2016-10
- 2016-11
- 2017-06
- 2017-07
- 2017-08
- 2017-09
- 2017-10
- 2017-11
- 2018-03
- 2018-04
- 2018-05
- 2018-06
- 2018-09
- 2018-11
- 2018-12
- 2019-02
- 2020-03
- 2020-04
- 2020-05
- 2020-06
- 2021-04
- 2021-05
- 2021-07
- 2021-08
- 2021-09
- 2021-10
- 2021-11
- 2022-08
- 2022-09
- 2022-10
- 2022-11
- 2022-12
- 2023-01
- 2023-02
- 2023-03
- 2023-04
- 2023-05
- 2023-06
- 2023-07
- 2023-09
- 2023-10
- 2023-11
- 2023-12
- 2024-01
- 2024-02
- 2024-03
- 2024-04
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号