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

男娘i 2022-05-17 03:09 313阅读 0赞

本人这里实现这个效果,主要是使用了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' });
            }

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