Панель навигации действует странно

Question

Моя навигационная панель, которую я разработал в JsFiddle, ведет себя странно. иногда меню гамбургера вообще не работает, а иногда оно открывается и закрывается более 5 раз. Любая помощь с благодарностью.

Он прекрасно работает, когда я избавляюсь от функции ширины окна, но я не хочу, чтобы она работала так же, когда она превышает 768 пикселей, так как меню гамбургеров больше не требуется при больших размерах экрана.

Я считаю, что это как-то связано с этим:

$(function(){
    var w = $(window).width();
$(window).resize(function() {
    if(w <= 768){
        $('.mobile-toggle').click(function(){
        $('nav').slideToggle(500);
        this.classList.toggle('change');
 });

  $('.m-link').click(function(){
      $('.m-link').removeClass('active');
      $(this).addClass('active');
      $('nav').slideToggle(500);
      $('.mobile-toggle').removeClass('change')
  });
 }else{
      $('nav').show();
 }
});
});

https://jsfiddle.net/ChrisFred96/zg4nprfm/56/

Answer 1

Похоже, что это связано с разрешением и как оно меняется. Насколько я понимаю, это не исправлено, если вы измените разрешение.

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-8px, 6px);
  transform: rotate(-45deg) translate(-8px, 6px);
  background-color: red;
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-7.5px, -7px);
  transform: rotate(45deg) translate(-7.5px, -7px);
  background-color: red;
}