实现左侧菜单点击按钮后菜单缩入左侧，再次点击再次显示效果+根据分辨率隐藏和显示菜单

本人这里实现这个效果,主要是使用了jq animate()方法

animate() 方法这里说明一下，该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

width:'toggle'这个方法这里也做了一下说，这个toggle属性就在元素是显示的情况下，就会执行隐藏，如果元素的显示的情况下触发就会执行显示

以下为本人实现点击按钮隐藏和显示效果的js代码

				$("#menuBtn").on('click',function(){
					//layui-icon-shrink-right
					let btn=$("#menuBtn i");
					if(btn.hasClass('layui-icon-spread-left')){
						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'});
					}else{
						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'});

					}
				})

以下是根据上面代码基础上，加上根据分辨率显示和隐藏的代码

       $("#menuBtn").on('click', function() {
            //layui-icon-shrink-right
            let btn = $("#menuBtn i");
            if (btn.hasClass('layui-icon-spread-left')) {
                menuHide(btn);
                btn.addClass('btn-index');

            } else {
                btn.removeClass('btn-index');
                menuShow(btn);
            }
        })
        $(window).resize(function() {
            let width = $(document.body).width();
            let btn = $("#menuBtn i");
            if (width < 1000) {
                if (btn.hasClass('layui-icon-spread-left')) {
                    menuHide(btn);
                }
            } else {
                if (!btn.hasClass('btn-index')) {
                    if (btn.hasClass('layui-icon-shrink-right')) {
                        menuShow(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' });
        }

以上为本人自己研究弄的，有更好的方法请留言