Javascript реагирует на рушится navbar. Проблемы при изменении размера

Question

Я создал навигационную панель с классическими значками ≣ для открытия и X для закрытия. Все в порядке растягивает окно браузера; после нажатия/закрытия и увеличения снова значок ≣ остается там до обновления страницы. Извините за мой бедный английский и спасибо заранее.

JS код

var $navbar = $('.js-navbar'); 
var $toggleMenu = $('.js-toggle-menu'); 

$toggleMenu.click(function() { 
if ($toggleMenu.hasClass("active")) { 
    $navbar.slideUp("fast"); 
    $toggleMenu.toggleClass("active"); 


    $('.toggle-active').hide(); 
    $('.toggle-menu').show(); 
} else { 
    $navbar.slideDown("fast"); 
    $toggleMenu.toggleClass("active"); 
    $('.toggle-active').show(); 
    $('.toggle-menu').hide(); 
} 
}); 

$(window).resize(function() { 
if (window.innerWidth > 760) { 
    $navbar.attr("style", ""); 
    $toggleMenu.removeClass("active"); 
} 
}); 

Jsfiddle https://jsfiddle.net/miauhaus/jdpo1b6r/

Answer 1

Представляется, что изменение размеров окна, вы не скрываете кнопку. Позвольте мне добавить в две строки, которые будут помочь:

$(window).resize(function() { 
if (window.innerWidth > 760) { 
    $navbar.attr("style", ""); 
    $toggleMenu.removeClass("active"); 
    $('.toggle-menu').hide(); //hide the button if it is too big 
} 
else{ 
$('.toggle-menu').show(); // Show the button if the screen is small enough 
} 
}); 

Все, что я сделал добавлена ​​возможность скрыть кнопку, когда на экране больше, чем мобильный размер с помощью:

 $('.toggle-menu').hide(); //hide the button if it is too big 

А потом мы можем показать его, если экран достаточно мал по:

$('.toggle-menu').show(); // Show the button if the screen is small enough 

JSFIDDLE

Answer 2

По соображениям производительности и для предотвращения барботирования событий я бы сделал задержку около 200 мс для функции ручного изменения размера, что-то вроде этого

$(window).resize(function() { 
    setTimeout(function() { 
     if (window.innerWidth > 760) { 
      //do the dew 
     } 
    }, 200); 
});