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

雨点打透心脏的1/2处 2022-10-15 13:53 842阅读 0赞

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

html代码如下:

<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>

在页面展示为：

![20210525152832174.png][]

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'});
                    }
                }
    });

最终效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70 1][]

[20210525152832174.png]: /images/20221014/e94ff6c9a4d44553b9f5651030c7e506.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70]: /images/20221014/eed46dd1c4074f079ed1095828951fc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4MTk4MTgx_size_16_color_FFFFFF_t_70 1]: /images/20221014/7c40b73032e74958ba9bc4a1f4ace646.png