Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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çãoDá uma olhada no console para ver o erro
Aperta a tecla "F12"
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/className)
[https://developer.mozilla.org/pt-BR/docs/Web/API/Element/classList](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/classList)