Ir para conteúdo
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

Compartilhar este post


Link para o post
Compartilhar em outros 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");
   }
});

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Vitor Correa
      Olá, estou criando uma página em html e estou tendo dificuldade em achar uma solução para esse problema, como faço para que o menu fique fixo em todas as páginas desse site sem que seja necessário refazer todo o código? Segue abaixo o código do meu menu e do css:
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./../css/header.css"> <title></title> </head> <body> <header> <img src="./../img/fundo.png"> <nav> <ul> <li><a href="sla.html" class="active">Início</a></li> <li><a href="pps.html">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> </ul> </nav> </header> </body> </html> img { width: 100px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; font-weight: bold; } li { float: left; border-right: 0px solid #333; } li: last-child { border-right: none; } li a { display: block; padding: 10px 15px; color: white; text-align: center; text-decoration: none; } li a:hover:not(.active){ background-color: #111; } .active { background-color: #FF0000; float: right; color: #111; }  
    • Por nohime
      Como resolver essas três tarefas sobre Comandos de Decisão IF do C#?
      2. Receber um número e verificar se ele esta na faixa de 0 à 9. Se sim, mostre uma mensagem afirmativa, caso contrário mostre uma mensagem indicando que o número não se encontra na faixa.
      6. Receber dois números e os apresente em ordem crescente. Utilize apenas a estrutura de decisão if, ou seja, sem o opcional else.
      9. Receber um ano e se este ano for bissexto exibir na tela “Ano Bissexto”, senão exibir na tela “Ano Não-Bissexto”. Um ano é bissexto se for divisível por 4, mas não por 100. Um ano também é bissexto se for divisível por 400.
    • Por jaquelss
      Estava fazendo download de coisas que uso no trabalho, mas parece que esqueci de algo. Sempre dá esse erro, mas tecnicamente parece que tá tudo ok?
      Eu esqueci algum programa ou algo do código em si?
      Agradeço desde já.
    • Por VCastilho
      Boa Tarde
      Estou tentando desenvolver um Filtro Inteligente, no qual funcionaria da seguinte forma:

      Filtro 1         Filtro 2          Filtro 3          Filtro 4 
      Opção 1
      Opção 2
      Opção 3


      Ao selecionar a Opção 1 do Filtro 1 liberaria as opções do filtro 2

      Filtro 1         Filtro 2              Filtro 3          Filtro 4 
      Opção 1      Opção 1 - a     
                           Opção 1 -b
                           Opção 1 -c

      Assim escolhendo a opção do filtro 2 liberaria as opções do Filtro 3 e assim por diante
      Ao escolher a Opção 2 do Filtro 1 liberaria outras opções

      No caso preciso aplicar na plataforma da Tray, que é o de menos porém não consigo chegar ao código certo
      Estou tentando utilizar o HTML e o JQuery em conjunto para isso, conseguem me ajudar? Realmente estou perdido na situação

      Atenciosamente Vinicius Castilho
    • Por lucianfpaula
      Olá gostaria de saber se alguém poderia me dar a direção para o seguinte:
      Quero desenvolver um serviço do tipo wix, onde a pessoa pode criar o site dela baseado em um template que irá ter no sistema. muito grato
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.