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 Bobrinha
      Olá a todos.
       
      Tenho uma dúvida e não sei se é possível caso tenha alguma sugestão por favor avise.
       
      Adicionar resultado de um innerhtml dentro de um link atributo href é possível? ou seja eu tenho um input onde seleciono um ano 
       
      <select id="ano"> <option selected>2019</option> <option value="2018">2018</option> <option value="2017">2017</option> </select> <div id="anoAtual"></div> No query pego o valor ou seja o ano selecionado e jogo no html
       
      $("select").change(function () { document.getElementById("ano").innerHTML = document.getElementById("anoAtual").value; });  
      Agora vem a dúvida como eu jogo na URL? existe uma outra forma? é possível?
       
      <a href='resultado.php&ano=COMO JOGAR O ANO AQUI?'>  
       
    • Por jlrs19833
      Bom dia, pessoal! Estou precisando de uma luz para saber como tratar determinado problema:
       
      Cenário: Ambiente em desenvolvimento de plataforma para gestão de uma empresa.
      Linguagem principal: PHP (framework CodeIgniter)
      Dificuldade: retornar dados de select dinâmico junto ao evento de post do formulário.
       
      Descrição: Conforme mencionado acima, estou desenvolvendo um pequeno sistema para uma empresa que conterá poucas telas, sou desenvolver entusiasta, então não tenho muito conhecimento e prática com este assunto. Em determinada tela, o cliente quer que haja um formulário de cadastro onde dentre os diversos campos deste form, haverá dois do tipo select, onde um é o select de cidade e o outro do tipo estado. O select de Estado é preenchido automaticamente quando do carregamento da view, através de uma chamada do controller/model junto ao BD e o select cidade é preenchido de maneira automática, com javascript, através de uma mesma consulta, passando o ID do campo estado. Minha dificuldade está quando faço o submit deste form, pois o campo value do option deste select (cidade) não é enviado junto, pois no código fonte ele não foi carregado. Como posso fazer para recuperar esse value e enviar junto com o evento de submit?
       
      Segue como meus arquivos estão sendo feitos. Como pode observar estou, tentando apenas printar os campos para que eu possa ter certeza que eles estão sendo carregados.
      https://gist.github.com/jlrs19833/808887a5221ff31ca6ea22bf0c8b85a5
       
      Peço desculpas se estou postando no local errado e que os moderadores me orientem neste caso.
       
      Desde já agradeço o auxílio de cada um.
    • Por jlrs19833
      Bom dia, pessoal! Estou precisando de uma luz para saber como tratar determinado problema:
       
      Cenário: Ambiente em desenvolvimento de plataforma para gestão de uma empresa.
      Linguagem principal: PHP (framework CodeIgniter)
      Dificuldade: retornar dados de select dinâmico junto ao evento de post do formulário.
       
      Descrição: Conforme mencionado acima, estou desenvolvendo um pequeno sistema para uma empresa que conterá poucas telas, sou desenvolver entusiasta, então não tenho muito conhecimento e prática com este assunto. Em determinada tela, o cliente quer que haja um formulário de cadastro onde dentre os diversos campos deste form, haverá dois do tipo select, onde um é o select de cidade e o outro do tipo estado. O select de Estado é preenchido automaticamente quando do carregamento da view, através de uma chamada do controller/model junto ao BD e o select cidade é preenchido de maneira automática, com javascript, através de uma mesma consulta, passando o ID do campo estado. Minha dificuldade está quando faço o submit deste form, pois o campo value do option deste select (cidade) não é enviado junto, pois no código fonte ele não foi carregado. Como posso fazer para recuperar esse value e enviar junto com o evento de submit?
       
      Segue como meus arquivos estão sendo feitos. Como pode observar estou, tentando apenas printar os campos para que eu possa ter certeza que eles estão sendo carregados.
      https://gist.github.com/jlrs19833/808887a5221ff31ca6ea22bf0c8b85a5
       
      Peço desculpas se estou postando no local errado e que os moderadores me orientem neste caso.
       
      Desde já agradeço o auxílio de cada um.
    • Por fernando56736454563
      cloneform = $('#dadosbanco').html(); $(document).on('click','.remDiv, .addDiv', function(e){ thisClass = e.target.className; thisClass == 'remDiv' ? ($('.'+thisClass).length > 1 ? $(this).closest('.remove').prev().add($(this).closest('.remove')).remove() : 0) : $('#dadosbanco').append(cloneform); }); var counter = 1; function addInput(divName, template) { if (counter == 5) { document.getElementById("add_more_text").remove(); } else { var newdiv = document.createElement('div'); newdiv.innerHTML = document.getElementById(divName).innerHTML; newdiv.className = 'added'; document.getElementById(template).appendChild(newdiv); counter++; } var selectElements = document.querySelectorAll('select'); for (var i = 0; i < selectElements.length; i++) { selectElements[i].id = 'id-' + i; selectElements[i].name = 'category' + i; } } function removeInput(obj) { if (obj.parentNode.className == 'added') { obj.parentNode.parentNode.removeChild(obj.parentNode); counter--; } } <input type="button" value="Adicionar Componente" class="addDiv"/> <div id="dadosbanco"> <div class="remove"> <div id="template"> <input type="text" name=""> <a href="javascript:void(0)" onClick="removeInput(this);">x</a> </div> <div id="add_more"></div> <a href="javascript:void(0)" onClick="addInput('template', 'add_more');" id="add_more_text">+ Add more</a> </div> <div class="remove"> <input type="button" value="Remover Componente" class="remDiv" /> </div> </div> Sempre que faço a clonagem da div id dadosbanco, quando clico para clonar a div de id template ele aparece na minha clonagem original da primeira div de id template
    • Por Soneca_BO
      Boa tarde Pessoal!
       
      Estou a um bom tempo tetando fazer um CRUD em um banco de dados não tradicional e sim do "Cognos tm1",
       
      Estou fazendo uma aplicação WEB e queria usar o Ajax com jquery e javascript(dependendo do caso) para fazer um CRUD
      salvando dados deletando e fazendo as devidas atualizações, mas não estou conseguindo fazer o "PUT" e nem o "DELETE", 
      E não faço ideia de como começar a escrever o código para os métodos informados acima.
       
      Segue código criado para fazer o GET (só conseguir fazer o GET)
      $.ajax({ username: 'admin', password: ' ', url: "http://localhost:8881/api/v1/Cubes('ACO.200.Despesas')/Views('visao')/tm1.Execute?$expand=Cube($select=Name;$expand=Dimensions($select=Name)),Axes($expand=Tuples($expand=Members($select=Name;$expand=Element($select=UniqueName)))),Cells", method: 'POST', headers: { "Authorization": "Basic YWRtaW46", "cache-control": "no-cache", }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { console.log(data); }, error: function () { alert("erro"); } });  
       
      Obs.: não sou muito bom em rest e estou buscando aprender mais sobre ele, se alguém poder me ajudar agradeceria muito.
       
      Desde já agradeço alguém que conseguir me da uma força.
       
×

Informação importante

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