Question

我目前正在建立一个覆盖效果非常简单的网站 - 我有一个汉堡包＆＃39; （.mobilemenu）菜单图标，单击该图标可切换导航覆盖（.mobile-nav）上的伪类。我希望添加一些代码，这些代码在初始点击时也会停用touchmove，再次点击（.mobilemenu）时，会恢复默认行为。

这是我的代码：

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');


    e.preventDefault();
});

我尝试了以下内容：

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
    if('.mobile-nav').hasClass('active') {
        $(body).on('touchmove', function(e) {
        e.preventDefault();
        }};

    e.preventDefault();
});

这显然不起作用！

坦率地说Javascript / JQuery对我来说很新，所以我确定这里的语法不正确。我是否可以切换禁用触摸移动的body类？或者我是否必须以某种方式重写代码并使用bind？

编辑：根据@John R的建议，我稍微改变了我的代码语法 - 这是一个小提琴：JS fiddle

我的代码现在看起来如下：

jQuery('.mobilemenu').click(function(e) {
  jQuery(this).toggleClass('is-active');
   jQuery('.mobile-nav').toggleClass('active');
     if(jQuery('.mobile-nav').hasClass('active')) {
     $(body).on('touchmove', function(e) {
     e.preventDefault();
  }};

e.preventDefault();
});

然而，这似乎完全杀死了叠加层！我猜测虽然行if(jQuery('.mobile-nav').hasClass('active')) {等现在是正确的，但以下位可能不是？

编辑2 ：所以经过一段时间的游戏，我已经更新了语法，叠加层再次正常工作，但我仍然可以在iPhone上覆盖后面滚动页面正文： http://jsfiddle.net/jameshenry/bzau0jaz/1/ - 如果有人有任何想法，我真的很感激！

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $(body).on('touchmove', function(e){
            e.preventDefault()}
                  )};
});

编辑3 ：在玩完结构和语法之后，我终于得到了“触摸移动”，“虚假”和“＃39;点击时工作。唯一的问题是它没有切换，所以滚动永久禁用！

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $('body').on('touchmove', false);
    };
});

我认为其他声明是可行的，但我尝试添加以下内容：

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');

    if(jQuery('.mobile-nav').hasClass('active')) {
        $('body').on('touchmove', false);
    };
    else { $('body').on('touchmove', true);};
});

但这似乎只是阻止叠加工作 - 有没有办法切换触摸移动＆＃39;什么时候关闭？这是一个小提琴http://jsfiddle.net/jameshenry/bzau0jaz/2/

Answer 1

更改此

if('.mobile-nav').hasClass('active'){
  //...
}

要

if(jQuery('.mobile-nav').hasClass('active')){
   //...
}

Answer 2

在jQuery中选择所有元素之前不要忘记$或“jQuery”...要使If语句工作，它需要

if (true) { ...something };

所以对你的 jQuery（'。mobile-nav'）。hasClass（'active'）=== true

所以你需要将它封装在括号中，所以

jQuery('.mobile-nav').hasClass('active') 需要在括号中......

if(jQuery('.mobile-nav').hasClass('active')){
    //doSomething
}

Answer 3

好的解决方案（经过大量的试验和错误以及花费了太多时间在这上面！）非常简单 - 使用.on()绑定并通过.off取消绑定 - 这是最终的jQuery代码：

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
        if(jQuery('.mobile-nav').hasClass('active')) {
            $('body').on('touchmove', false);
        } else  {
            $('body').off('touchmove', false);
        }
});

如果任何人都能看到这种方法中存在任何缺陷，或者有什么方法可以解决这个问题，那就太棒了。好像虽然工作得很好！

单击启用/禁用touchmove

3 个答案: