Javascript 如何在调整大小和检测宽度时启动jQuery

我有我写的剧本，但我需要帮助。它的工作原理应该类似于移动设备/平板电脑的非画布菜单

问题是，如果我重新调整浏览器的大小并再次打开菜单，-270px的边距不是理想的，因为如果我调整浏览器的大小，原始标记的-270px不匹配，因为它是不同的视口大小

现在，我正在使用

marginLeft:-270px:/code>将主体推到左侧，这在加载时可以正常工作，但如果我调整浏览器大小，所有内容都会出现问题

任何帮助都将不胜感激

jQuery('.menu-toggle').toggle(function() {
        jQuery(this).addClass('open');
        jQuery('#top-main-nav-container').addClass('active');

        jQuery('body').animate({
          marginLeft: '-270'
        }, 700);
        jQuery('.main-navigation ul').css('display','block');

      },function() {
         jQuery(this).removeClass('open');
         jQuery('#top-main-nav-container').removeClass('active');

         jQuery('body').animate({
           marginLeft: '0'
         }, 700);

         jQuery('.main-navigation ul').css('display','none');

      });`

CSS

.menu-toggle.open {
    padding: 30px 25px 500% 100%; 
    background-color: rgba(165, 166, 168, 0.952941);
}
body.active {
    margin:0;
    -moz-transition: margin .5s;
    -webkit-transition: margin .5s;
    transition: margin .5s;
}
#top-main-nav-container.active {
    right:0;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

最后一个
.resize（）
调用将在加载时运行此代码

或

最干净的方法是将其也绑定到加载事件：

$(window).on('load resize', function () {

});

$（window）.resize（function（）{/*您的fn here*/}）请看，我已经尝试过这个方法，但它需要在加载和调整大小时工作@Joybank添加用于调整窗口大小事件的代码
$(window).on('load resize', function () {

});