Estou desenvolvendo um menu responsivo aonde na versão mobile ele é chamado através de um icone, no entanto em algumas ocasiões ao redimensionarmos a pagina um evento de click deixa de funcionar e a classe (logo abaixo) .menu-mobile não é retirada
<div class="nav-toggle"></div>
<nav class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
.
function menu (){
$('.nav-toggle').click( function () {
if ($('.menu').hasClass('menu-mobile')) {
$('.menu').addClass('abrir-menu').removeClass('menu-mobile');
} else {
$('.menu').addClass('menu-mobile').removeClass('abrir-menu');
} }); }
$(window).resize( function (){
var largura = $(window).width();
if(largura < 767){
$('.menu').addClass('menu-mobile');
} else {
$('.menu').removeClass('menu-mobile abrir-menu');
}
menu(); });
Em resumo do código, a classe .menu-mobile serve apenas como um gatilho para executar a condicional de abrir e fechar o menu