jQuery addClass() 在某些媒体查询中不起作用

Question

如果页面加载完毕且浏览器窗口在1100px & 640px 之间，则以下 jQuery 脚本可以正常工作：

  $('#mobileMenu').click(function(){      
    if ($('body').hasClass('mobile-nav-open')) {
      $('body').removeClass('mobile-nav-open')
    } else {
      $('body').addClass('mobile-nav-open');
    };
  });

当点击a#mobileMenu 时，会向body 添加一个类并且移动导航菜单滑入，然后删除该类并且移动导航菜单在再次单击时关闭。

但如果页面在<=640px 加载，则.mobile-nav-open 类永远不会添加到body。我一生都无法弄清楚为什么它不起作用。该代码也通过 Squarespace 的代码注入插入到页脚中。模板中包含很多可能会干扰的 JS，但我不知道如何覆盖它。任何人都可以帮助我吗？任何帮助表示赞赏。

该网站可以在这里看到：https://ryan-vandyke-4rks.squarespace.com/

这似乎是我想要覆盖的内容：

Y.use(function (a) {
  a.on("domready", function () {
    if (640 >= a.one("body").get("clientWidth")) a.one("#mobileMenu").on("click", function () {
        a.one("body").hasClass("mobile-nav-open") ? a.one("body").removeClass("mobile-nav-open") :
        (a.one("body").addClass("mobile-nav-open"), a.one("body.email-open") && a.one("body").removeClass("email-open"), a.one("body.desc-open") && a.one("body").removeClass("desc-open"))
    });
  })
});

Answer 1

而不是点击添加/删除类尝试下面的方法在body标签上添加/删除类。

function addBodyClass(){
    if($(window).width() <= 640){
        $('body').addClass('mobile-nav-open');
    } else {
        $('body').removeClass('mobile-nav-open');
    }
}

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

Fiddle Demo