Question

如果页面已加载且浏览器窗口位于1100px＆amp; 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并移动导航菜单，然后删除该类，并在另一次点击时关闭移动导航菜单。< / p>

但是如果页面是在<=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

jQuery addClass（）在某些媒体查询中不起作用

1 个答案: