侧边栏的收缩"/>
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;}
});
更多推荐
Layui 之 实现左侧边栏的收缩
发布评论