layui 本身就有个class 用来判断手机端自动隐藏 : layui-hide-xs xs可以换成lg/xl 等,具体意义自行百度
div 在使用这个class后,在手机端的时候会自动隐藏,但会导致整体布局有影响,比如侧边导航隐藏后,本来在导航栏右边的内容应该自动向左调整,但事实上并不会,我也不清楚具体原因,所以这个暂时只能用来对一些隐藏后不需要调整布局的情况下使用
至于刚刚说的问题的解决方案如下:
<script>
layui.use(['element', 'layer', 'util'], function () {
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
$(window).resize(function () {
var width = $(document.body).width();
var btn = $("#leftEnumIcon");
if (width < 768) {
if (btn.hasClass('layui-icon-spread-left')) {
menuHide(btn);
btn.addClass('btn-index');
}
} else {
if (btn.hasClass('layui-icon-shrink-right')) {
btn.removeClass('btn-index');
menuShow(btn);
}
}
});
//头部事件
util.event('lay-header-event', {
menuLeft: function (othis) { // 左侧菜单事件
var btn = $("#leftEnumIcon");
if (btn.hasClass('layui-icon-spread-left')) {
menuHide(btn);
btn.addClass('btn-index');
} else if (btn.has('layui-icon-shrink-right')) {
btn.removeClass('btn-index');
menuShow(btn);
}
},
menuRight: function () { // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
function menuShow(btn) {
btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
$(".layui-side").animate({width: 'toggle'});
// $(".layui-logo").animate({width: 'toggle'});
$(".layui-body").animate({left: '200px'});
$(".layui-footer").animate({left: '200px'});
}
function menuHide(btn) {
btn.removeClass(' layui-icon-spread-left').addClass('layui-icon-shrink-right');
$(".layui-side").animate({width: 'toggle'}); //toggle如果原来div是隐藏的就会把元素显示,如果原来是显示则隐藏
// $(".layui-logo").animate({width: 'toggle'});
$(".layui-body").animate({left: '0px'});
$(".layui-footer").animate({left: '0px'});
}
</script>
leftEnumIcon 是指有一个按钮可以隐藏、显示侧边栏,也可以不要
具体实现看代码