layui自定义ajax左侧三级菜单
前端  /  管理员 发布于 4年前   363
本文实例为大家分享了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语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布!(0个评论)
- Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
- Laravel 11.14版本发布 - 新的字符串助手和ServeCommand改进(0个评论)
- Laravel 11.12版本发布 - Artisan的`make`命令自动剪切`.php `扩展(0个评论)
- golang支持托盘的程序模板:fyneMiniProgram-程序带图标,程序最小化到系统栏(0个评论)
- Laravel的轻量型购物车扩展包:binafy/laravel-cart(0个评论)
- 在go语言中使用http实现multipart/form-data文件上传,不加载文件到内存功能示例(0个评论)
- 2024.07.09日OpenAI将终止对中国等国家和地区API服务(0个评论)
- 在go语言中使用crypto/bcrypt实现用户密码非明文存储示例(0个评论)
- 近期评论
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
- 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号