Jump to content
caio_fgf

Script não funcionando totalmente

Recommended Posts

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

Share this post


Link to post
Share on other sites
$(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");
   }
});

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Caio Vargas
      Fala pessoal blz
      Tenho uma hellobar e gostaria de emitir um som quando ela aparecer na tela para o usuario como posso fazer isso 
    • By Caio Vargas
      Fala pessoal blz ... 
      Eu criei um menu estilo app para meu site ... E ele tem um efeito porém esse efeito só acontece quando não dá refresh na página então eu teria que chamar as páginas via Ajax ... E como eu poderia fazer isso ?
    • By Caio Vargas
      Fala pessoal blz ... 
      Eu criei um menu estilo app para meu site ... E ele tem um efeito porém esse efeito só acontece quando não dá refresh na página então eu teria que chamar as páginas via Ajax ... E como eu poderia fazer isso ?
    • By Caio Vargas
      Fala pessoal como estOu criando um ecommerce estou com uma dúvida de como criar um filtro de produtos igual a desse site aqui 
      https://www.charmefitness.com.br/produtos/moda-fitness ele já vem marcado a categoria que está e já pega todos os itens daquela categoria alguém tem algo assim ou já fez 
       
       
    • By Caio Vargas
      Fala pessoal estou com uma grande duvida ...
      fiz algumas pesquisa sobre o filtro de produtos ... ate consegui fazer alguma coisa porem eu estou em duvida ... pq pelas referencias que eu vi  tem uns que ja vem selecionado a categoria
      alguem tem algum exemplo de filtro 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.