Script não funcionando totalmente

[caio_fgf 0]

Estou desenvolvendo um site e necessito que o menu receba a classe ativo quando o botão for clicado, e se este for clicado de novo ou qualquer parte do documento for clicada, o menu perca a classe.

Ao clicar em outra parte da página, o menu desaparece, porém, ao clicar novamente no botão do menu, não consigo a aplicação desejada

$(document).ready(function () {
	var menu = $("nav")
    $(".bt_menu").click(function (e) {
        if (menu.hasClass("ativo")) menu.removeClass("ativo");
        else menu.addClass("ativo");
        e.stopPropagation();
    });
    $(document).click(function (e) {        
         $('nav').removeClass("ativo");
    });
});

Grato pela atenção

[andersonhese 0]

$(document).click(function (e) {        
	$('nav').removeClass("ativo");
});

Provavelmente essa parte está causando esse erro, antes de remover a classe verifique se ela existe no elemento.

 

$(document).click(function (e) { 
   if ($('nav').hasClass("ativo")) {
   	 $('nav').removeClass("ativo");
   }
});

 

[Pita 53]

Dá uma olhada no console para ver o erro

Aperta a tecla "F12"

[Omar~ 87]

Não sou fã de jquery (Na verdade detesto essa coisa). Mas vamos lá.

Em sua função você tem 2 eventos disparados com o click.

Um no documento outro no elemento, porque se disparar os dois não vai dar certo mesmo, o correto e mais eficaz seria ter um único evento de gatilho no documento. Então checar se o elemento alvo do click que disparou o evento é o do botão, então o restante da função é ativa, do contrário outra coisa deve acontecer.

Você diz que se clicado em qualquer outra parte o "menu" deve desaparecer, então nesse termo se aplica as condições já mencionadas pelo colega, você tem que saber se o menu está ativo antes de remover-lo.

Spoiler

21 horas atrás, andersonhese disse:

$(document).click(function (e) {        
	$('nav').removeClass("ativo");
});

Provavelmente essa parte está causando esse erro, antes de remover a classe verifique se ela existe no elemento.

 

$(document).click(function (e) { 
   if ($('nav').hasClass("ativo")) {
   	 $('nav').removeClass("ativo");
   }
});

 

 

 

Veja um exemplo na prática, para ver como é simples essa questão:

Spoiler

<style>
    #escondido {display:none}
    #escondido.mostra {display:block}
</style>

<button id="botao">Click em mim</button>
<div id="escondido">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<script>
    var a = document.getElementById('escondido'), b;
    document.addEventListener('click', mostra, false);

    function mostra(e) {
        b = e.target.id;
        if (b === 'botao') {
            a.classList.toggle('mostra');
        } else if (a.className === 'mostra') {
            a.classList.remove('mostra');
        }
        return (false);
    }
</script>

 

 

Sugiro que dê uma lida nessas documentações:

https://developer.mozilla.org/pt-BR/docs/Web/API/Element/className

https://developer.mozilla.org/pt-BR/docs/Web/API/Element/classList