實作左側菜單點選按鈕後菜單縮入左側，再次點選再次顯示效果+根據分辨率隐藏和顯示菜單

本人這裡實作這個效果,主要是使用了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' });
        }
           

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