在移动设备上只有运行 JQuery

Question

总的来说，我对 JavaScript 有点陌生，我自己制作了一个脚本，应该在点击时将类添加到其他类。

现在我遇到的问题是该代码应该仅适用于移动视图（宽度小于 800 像素），效果很好，但是当我将 window 调整为以上内容时，在使用脚本后它仍然有效。

脚本：

$(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

您可以处理 window 调整大小事件：（但对于这种行为，您应该使用 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);
});

Answer 2

尝试在 click 处理程序中放置 if 条件，在 if 语句中 .toggleClass() 调用

    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 3

 $(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/ 拖动 window 并查看文本变化。

这可能是最可靠的快速解决方案，但我犹豫是否提供它，因为它可能超出了您目前所学的范围。但问题是，如果某些东西不是 .on，您可以避免调用 .off() 函数，并且您还可以避免每次调整 window 大小时都必须繁琐地重新绑定和取消绑定函数调用。您还可以避免在每个块中放置 if 条件。

绑定只需进行一次。

发生的事情是：由于我们绑定到文档，当我们点击时它会检查作为我们第二个参数的选择器。所以如果选择器匹配'body.mobile .mobileNavButton'，它就执行函数

在 window 调整大小事件中，我们在正文中添加或删除 'mobile' class，这样只有运行元素是'body.mobile'。（我们在脚本第一个运行时调用它一次，以备不时之需）

注意事项

虽然，如果您真的想确保它是移动的，而不仅仅是一个小屏幕，您将需要比 $(window).width(); 更广泛的检查；如果这与您相关，请查看：

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

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

在移动设备上只有运行 JQuery

Only run JQuery on mobile view

javascript

jquery

resize

在移动设备上只有 运行 JQuery

Only run JQuery on mobile view

javascript

jquery

resize

在移动设备上只有运行 JQuery