Layui 后台模板 框体布局 实现 iframe 跳转、侧边菜单收缩
第一步：
到这个网址 复制代码 到 新建空白网页（ladmin.html)Admin UI 框体布局 - Layui 文档
https://layui.dev/docs/2.8/layout/
layout 管理界面大布局示例 - Layui
Layui 框体布局内容主体区域
下面是充数内容，为的是出现滚动条
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
充数内容
你还真滑到了底部呀
tester
第二步 准备好 要添加的代码：
var isShow = true; 插入 var $ = layui.$; 后面
//选择出所有的span，并判断是不是hidden
$('.layui-nav-item span').each(function(){
if($(this).is(':hidden')){
$(this).show();
}else{
$(this).hide();
}
});
//判断isshow的状态
if(isShow){
$('.layui-side.layui-bg-black').width(60); //设置宽度
$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
//将footer和body的宽度修改
$('.layui-body').css('left', 60+'px');
$('.layui-footer').css('left', 60+'px');
//将二级导航栏隐藏
$('dd span').each(function(){
$(this).hide();
});
//修改标志位
isShow =false;
}else{
$('.layui-side.layui-bg-black').width(200);
$('.kit-side-fold i').css('margin-right', '10%');
$('.layui-body').css('left', 200+'px');
$('.layui-footer').css('left', 200+'px');
$('dd span').each(function(){
$(this).show();
});
isShow =true;
};这个代码是插入到 （// 左侧菜单事件）
注：打隐藏的操作左侧菜单事件 的按按钮 （把这个删除了 layui-hide-sm）
再给菜单添加图标和文字加span :class="layui-icon layui-icon-spread-left" >menu groups2
用于操作隐藏文字只显图标，上面 60 就是图标最好看的宽度
这样就完成 侧边菜单收缩
第三步 就要完成 实现 iframe 跳转
准备以下代码：
插入
