Question

我写了这个脚本，但我需要帮助。它假设像手机/平板电脑的画布菜单一样工作

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

现在我正在使用marginLeft:-270px向左推动身体，这在加载时效果很好但是如果我调整浏览器的大小，一切都会变得越来越多。

任何帮助将不胜感激。

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;
}

Answer 1

$(window).on("resize", function () {

    // Invoke the resize event immediately
    }).resize();

最后一次.resize()调用将在加载时运行此代码。

或

最干净的方法是将它也绑定到load事件：

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

如何在调整大小时触发我的jQuery并检测宽度

1 个答案: