Функция Jquery по определенному размеру окна

Question

Я пытаюсь сделать скрипт работать только в том случае, если пользователь находится в 1024 или меньше. Он работает несколько хорошо, если пользователь не изменяет размер окна. Но когда я запускаю событие click ниже 1024, а затем изменяю его размер, можно сказать, что добавлены классы переключения, а анимация снова обманывает.

Любые предложения?

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

использовать, если заявление внутри события нажатия

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

Answer 2

Проверьте ширина окна на документ готов и на изменения размеров окна, и назначить или удалить 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(); 
    } 
} 

Execute checkWin() на дом готов и на окне изменить размер:

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

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