Layui 之 实现左侧边栏的收缩

侧边栏的收缩"/>

Layui 之 实现左侧边栏的收缩

参考网址

html 中

<ul class="layui-nav layui-layout-left"><li class="layui-nav-item layadmin-flexible" lay-unselect=""><a href="javascript:;" layadmin-event="flexible" title="侧边伸缩"><i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i></a></li><li class="layui-nav-item"><a class="layui-icon layui-icon-refresh-3" href="javascript:;" title="刷新当前页" style="color:#fff;" onclick="refresh()"></i></a></li>
</ul>

js 中

// 下面是菜单栏收缩var isShow = true;  //定义一个标志位$('#LAY_app_flexible').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(0); //设置宽度$('.kit-side-fold i').css('margin-right', '70%');  //修改图标的位置//将footer和body的宽度修改$('.layui-body').css('left', 0+'px');$('.layui-footer').css('left', 0+'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;}
});