Question

我总体上对JavaScript很陌生，而且我自己制作了一个脚本，可以在点击时将类添加到其他类中。

现在我遇到的问题是代码应该只适用于移动视图（宽度不超过800px），效果很好，但是当我将窗口调整到上面的某个位置时，在使用脚本后它仍处于活动状态。< / p>

脚本：

$(document).ready(function() { 
    if ($(window).width() <=800 ) {
        $('.mobileNavButton').click(function() {
            $('.mainNav').toggleClass('active');
            $('.mobileNavButton').toggleClass('active');
        });
        $('.hasDropdown').click(function() {
            $('.dropdown').toggle('slide');
            $('.dropdown').toggleClass('active');
            $('.hasDropdown').toggleClass('rotate');
        });
        $('.hasSubDropdown').click(function() {
            $('.subDropdown').toggle('slide');
            $('.subDropdown').toggleClass('active');
            $('.hasSubDropdown').toggleClass('rotate');
        });
    }
});

你们都帮了我很多！谢谢！

Answer 1

尝试将if条件置于click个处理程序中，.toggleClass()语句中的if个调用

    var check  = function() {
      return $(window).width() <=800
    }

    $('.mobileNavButton').click(function() {
         if (check()) {
           $('.mainNav').toggleClass('active');
           $('.mobileNavButton').toggleClass('active');
         }
     });
     $('.hasDropdown').click(function() {
         if (check()) {
           $('.dropdown').toggle('slide');
           $('.dropdown').toggleClass('active');
           $('.hasDropdown').toggleClass('rotate');
         }
     });
     $('.hasSubDropdown').click(function() {
         if (check()) {
           $('.subDropdown').toggle('slide');
           $('.subDropdown').toggleClass('active');
           $('.hasSubDropdown').toggleClass('rotate');
         }
     });

Answer 2

 $(document).on('click', 'body.mobile .mobileNavButton', function() {
    $('.mainNav').toggleClass('active');
    $('.mobileNavButton').toggleClass('active');
});

$(document).on('click', 'body.mobile .hasDropdown', function() {
   $('.dropdown').toggle('slide');
    $('.dropdown').toggleClass('active');
    $('.hasDropdown').toggleClass('rotate');
});

$(document).on('click', 'body.mobile .hasSubDropdown', function() {
    $('.subDropdown').toggle('slide');
    $('.subDropdown').toggleClass('active');
    $('.hasSubDropdown').toggleClass('rotate');
});

$(window).resize(function(e) {
    if ($(window).width() <= 800) {
        $('body').addClass('mobile');
    }
    else {
        $('body').removeClass('mobile');
    }
});

$(document).ready(function(){
  $(window).resize(); // call once for good measure!
});

https://jsfiddle.net/3okzr4z4/ 拖动窗口并查看文本更改。

这可能是最可靠的快速解决方案，但我不愿意给它，因为它可能超出了你迄今为止学到的内容。但事实是，如果某些东西不是.on，你就避免调用.off（）函数，并且你也避免在每次调整窗口大小时都需要繁琐地重新绑定和取消绑定函数调用。如果每个区块都有条件，你也可以避免放置。

绑定只需要进行一次。

发生的事情是：由于我们绑定到文档，它会在我们获得单击时检查作为我们的第二个参数的选择器。因此，如果选择器匹配'body.mobile .mobileNavButton'，它将执行该函数。

在窗口调整大小事件中，我们在主体中添加或删除“移动”类，这样只有当元素是'body.mobile'的子元素时才会运行这些函数。（当脚本第一次运行时，我们称之为一次好的措施）

<强>注意事项

虽然，如果你真的想要确保它是移动的，而不仅仅是一个小屏幕，你需要更多的检查，而不仅仅是$（window）.width（）; 如果这与您相关，请查看：

What is the best way to detect a mobile device in jQuery?

（另外，伙计们，你不能在jQuery中使用媒体查询大声笑）

Answer 3

您可以处理窗口调整大小事件:(但是对于这种行为，您应该使用css media queries）

更新：限制调整大小的调用

var resizeTimer;
$(window).resize(function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($(window).width() <= 800) {
            $('.mobileNavButton').click(function() {
                $('.mainNav').toggleClass('active');
                $('.mobileNavButton').toggleClass('active');
            });
            $('.hasDropdown').click(function() {
                $('.dropdown').toggle('slide');
                $('.dropdown').toggleClass('active');
                $('.hasDropdown').toggleClass('rotate');
            });
            $('.hasSubDropdown').click(function() {
                $('.subDropdown').toggle('slide');
                $('.subDropdown').toggleClass('active');
                $('.hasSubDropdown').toggleClass('rotate');
            });
        } else {
            $('.hasDropdown').off("click");
            $('.hasSubDropdown').off("click");
            $('.mobileNavButton').off("click");
        }
    },250);
});

仅在移动视图上运行JQuery

3 个答案: