layui 侧边导航 自动隐藏

首页 / 前端 / 正文

获取中...

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 是指有一个按钮可以隐藏、显示侧边栏,也可以不要

具体实现看代码

打赏
评论区
头像