layui隐藏侧边栏_layui实现侧边栏收缩的⽅法
layui实现侧边栏收缩的⽅法：⾸先打开原⽣的左侧导航栏代码并进⾏修改；然后打开JavaScript代码⽂件；最后实现侧边栏收缩效果即可。
本教程操作环境：Windows7系统、layui2.4版，该⽅法适⽤于所有品牌电脑。
侧边栏怎么打开修改layui的后台模板的左侧导航栏可以伸缩
原⽣的左侧导航栏代码：
所有商品
列表⼀
列表⼆
列表三
解决⽅案
列表⼀
列表⼆
⾃⼰修改的：
⽣源追踪
⽣源列表
学校信息
⼯做计划
学员管理
学员列表
考勤管理
沟通计划
成绩管理
管理设置
账号管理
授权管理
系统管理
系统信息
操作⽇志
JQ代码：
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
var isShow = true; //定义⼀个标志位
$('.kit-side-fold').click(function(){
//选择出所有的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;
} });

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。