javascript - 动画侧边栏在调整大小时中断

Question

我正在尝试构建一个动画侧边栏，当您单击该按钮时它会滑入和滑出。这很容易实现，但是我在使侧边栏“更具”响应性时遇到了问题。基本上，我希望侧边栏在宽度小于 500 时宽 200 像素，否则宽 300 像素。这是在媒体查询中完成的。我遇到的问题是，当您调整窗口大小时，如果您在调整大小之前已经运行了该功能，则侧边栏会错位。

例如，如果用户在使用侧边栏时旋转他们的移动屏幕，就会出现此问题，因此我认为最好尝试修复它。

这是 jQuery:

function sidebar(){
    var menuWidth = $('#menu').width();
    if($('#menu-link').hasClass('hidden')){
            $('#menu-link').removeClass('hidden');
            $('.push').animate({right: "-=" + menuWidth});
        }else{
            $('#menu-link').addClass('hidden');
            $('.push').animate({right: "+=" + menuWidth});
        }

};

$('body').on('click', '#menu-link', sidebar);

侧边栏更改为 200px <500，否则为 300px。编写此代码的最佳方法是什么，还是通过始终将侧边栏设置为 200 像素来保持简单更好，即使它在较大的分辨率下不那么美观。

这是我的代码的 JSFiddle 链接 https://jsfiddle.net/fqcydqu7/

编辑:抱歉，为了清楚地解释实际问题 - 在您调整大小之前，此代码运行良好且完美。但是，如果您运行此代码(即打开和关闭侧边栏)然后调整窗口大小以使媒体查询处于事件状态，您将看到侧边栏偏离了 100 像素的位置。如果您颠倒顺序，则会发生相反的情况。

Answer 1

好吧，我想出了一个解决我的问题的方法。

基本上，我从 CSS 中删除了媒体查询并将 div 设置为始终为 300 像素。jquery 使用一个变量，每当调整窗口大小时更新该变量来判断菜单滑动多少。 (200 像素或 300 像素)。

代码如下:

// variable is set to 0 by default
var menuWidth = 0;
//call to function that will set this variable
setWidth();
function setWidth(){
    if(windowSize <= 800){ //if its less than 800px wide, set the variable to 200px (the menu is still 300px)
        menuWidth = "200px";
    }else{
        menuWidth = "300px"; //otherwise set the variable to 300px
    }
}
$(window).resize(function(){ //when a user resizes the window, run the setWidth function to readjust the variable
    setWidth(); //this re-runs setWidth

    //the following closes the menu if it's already open to avoid glitches
    if($('#menu-link').hasClass('hidden')){
    $('#menu-link').removeClass('hidden');
    $('.push').animate({right: "-=" + menuWidth});
}
});


 //nav slide
function sidebar(){
   if($('#menu-link').hasClass('showing')){ //checks to see if the nav is showing or not
            $('#menu-link').removeClass('showing'); //remove the showing tag
            $('.push').animate({right: "-=" + menuWidth}); //closes the nav
        }else{ //if the nav doesnt have showing tag it must be hidden
            $('#menu-link').addClass('showing'); //add the showing tag
            $('.push').animate({right: "+=" + menuWidth}); //open the nav
        }

};

使用这段代码，当窗口宽度小于 800px 时，菜单只会滑出 200px，如果宽度小于 300px，则菜单只会滑出 200px。即使用户旋转手机或更改窗口宽度，div 也将始终处于正确位置。