关于layui使用对左侧的垂直导航栏的隐藏和显示（参考）

参考链接如下：https://www.kanzhun.com/jiaocheng/146295.html我需要在头部文件中实现展示和隐藏的需求html代码如下:<li class="layui-nav-item layui-show-xs-inline-block " lay-header-event="menuLeft"><a h

Gin_Zou

6700人浏览 · 2021-05-25 15:32:06

Gin_Zou · 2021-05-25 15:32:06 发布

我需要在头部文件中实现展示和隐藏的需求

html代码如下:

  <!-- web、移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block " lay-header-event="menuLeft">
                <a href="javascript:;"> <i id="leftEnumIcon" class="layui-icon layui-icon-spread-left"></i></a>
            </li>

在页面展示为：

JS实现：

 //头部事件
        util.event('lay-header-event', {  //util 记得 声明 var util = layui.util
            //左侧菜单事件
            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);

                }

                $(window).resize(function () {
                    var width = $(document.body).width();
                    var btn = $("leftEnumIcon");
                    if (width < 1000) {
                        if (btn.hasClass('layui-icon-spread-left')) {
                            menuShow(btn);
                        }
                    } else {
                        if (!btn.hasClass('btn-index')) {
                            if (btn.hasClass('layui-icon-shrink-right')) {
                                menuHide(btn);

                            }
                        }


                    }

                });

                function menuShow(btn) {
                    btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
                    $(".layui-side").animate({width: 'toggle'});
                    $(".zq-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是隐藏的就会把元素显示，如果原来是显示则隐藏
                    $(".zq-logo").animate({width: 'toggle'});
                    $(".layui-body").animate({left: '0px'});
                    $(".layui-footer").animate({left: '0px'});
                }
            }
});

最终效果：