Jquery 针对特定 window 大小的函数

Question

我正在尝试使脚本仅在用户处于 1024 或更低时才有效。如果用户不调整 window 的大小，它可以正常工作。但是，当我在低于 1024 时触发点击事件，然后将大小调整为 1200 时，切换类已添加并且动画再次出现。

有什么建议吗？

if ($(window).width() <= 1024) {
    $("#primary-menu").click(function(){
        $(".main-navigation").removeClass("toggled");
        $(".cmn-toggle-switch").removeClass("active");
        $(".menu-item").toggleClass("animated").toggleClass("wow").toggleClass("fadeInUp");
    });

    $(".hamburger-menu-text").click(function(){
        $(".cmn-toggle-switch").toggleClass("active");
        $(".main-navigation").toggleClass("toggled");
        $(".menu-item").toggleClass("animated").toggleClass("wow").toggleClass("fadeInUp");
    });     
};

Answer 1

在点击事件中使用 if 语句

 $("#primary-menu").on('click',function(){
     if ($(window).width() <= 1024) {
        //..........
     }else{
        //..........
     }
});

Answer 2

检查文档准备就绪时的 window 宽度和 window 调整大小，并分配或删除 click 侦听器：

var primaryFunc = function() {
    $(".main-navigation").removeClass("toggled");
    $(".cmn-toggle-switch").removeClass("active");
    $(".menu-item").toggleClass("animated").toggleClass("wow").toggleClass("fadeInUp");
}

var hamFunc = function() {
    $(".cmn-toggle-switch").toggleClass("active");
    $(".main-navigation").toggleClass("toggled");
    $(".menu-item").toggleClass("animated").toggleClass("wow").toggleClass("fadeInUp");
} 

var resetElements = function() {
   // Unbind the click event
   $("#primary-menu").off('click');
   $(".hamburger-menu-text").off('click');

   // remove assigned classes from elements
}

var checkWin = function() {
   var w = $(window).width();
   if (w <= 1024) {
       $("#primary-menu").on('click', function() {
          primaryFunc();
       });
       $(".hamburger-menu-text").on('click', function() {
          hamFunc();
       });
   } else {           
       resetElements();
   }
}

在 dom 就绪和 window 调整大小时执行 checkWin()：

$(document).ready(function() {
    checkWin();
})

$(window).resize(function() {
    checkWin();
});

Jquery 针对特定 window 大小的函数

Jquery function on specific window size

jquery

animation

jquery-click-event