Изменение размера окна всегда вызывает событие щелчка

Question

У меня есть боковая панель ботстрапа, которая может быть переключена в узкую панель значков, и теперь мне нужно показать боковую панель, когда высота экрана больше 768, и к узкой боковой панели при высоте ниже 768. Но мой скрипт запускает событие щелчка, когда оно меньше 768, поэтому, если я несколько раз изменяю размер экрана, а когда высота достигает 768, он непрерывно переключает боковую панель несколько раз. Если высота достигает более 768, переключение останавливается.

Мой код:

$("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
     $("span", this).toggleClass("fa fa-lock fa fa-unlock"); 
    }); 
$("#menu-toggle-2").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled-2"); 
     $("span", this).toggleClass("fa fa-lock fa fa-unlock"); 
    }); 

$(document).ready(function() { 
    var $window = $(window); 

     // Function to handle changes to style classes based on window width 
     function checkWidth() { 
      if ($window.height() <= 768) { 
       $("#wrapper").toggleClass("toggled-2"); 

      } 
      else if ($window.height() > 768) { 
       $("#wrapper").toggleClass("toggled"); 
      } 
     } 

    // Execute on load 
    checkWidth(); 
    // Bind event listener 
     $(window).resize(checkWidth); 
}); 

любая помощь и заранее спасибо.

Answer 1

Вы уверены, что событие click запускается? (Попробуйте сделать журнал внутри функции щелчка, чтобы подтвердить это с помощью console.log)

На основании кода, который вы отправили, это выглядит как resize при многократном изменении при изменении размера окна.

Попробуйте использовать следующее:

$(window).resize($.throttle(checkWidth, 300)); 

дроссельной заслонки возвращает новую функцию, которая не выполняет не более чем один раз в 300мс (или что-то задержит вы решили установить)

Примечание: При этом используется JQuery дребезга/дроссель плагин

https://code.google.com/archive/p/jquery-debounce/