1

如果页面已加载且浏览器窗口介于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"))
    });
  })
});
4

1 回答 1

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

于 2014-03-12T05:10:02.227 回答