DinhoPHP 1 Denunciar post Postado Dezembro 17, 2017 Olá! Desejo exibir uma div após o link da div com id="#link_busca_adv" receber um clique e escondê-la novamente ao receber outro click. Muito simples, porém este código não a esconde novamente. $(document).ready(function () { $('#link_busca_adv').click(function () { var data = $('#rowform').css('visibility', 'hidden'); if (data.css('visibility', 'hidden')) { data.css('visibility', 'visible'); $('#link_busca_adv').html("Ocultar Busca Avançada"); } else if (data.css('visibility', 'visible')) { data.css('visibility', 'hidden'); $('#link_busca_adv').html("Busca Avançada"); } else{ data.css('visibility', 'hidden'); $('#link_busca_adv').html("Busca Avançada"); } }); }); <a id="link_busca_adv" href="#" style="color: #ff0000 !important; display: flex; font-weight: 600; font-size: 0.7em; align-items: center; margin-right: 50px;">Busca Avançada<span class="fa fa-sort-desc" aria-hidden="true" style="color: #FF0000 !important; margin-top: -10px;"></span></a> <div id="rowform" style="visibility: hidden;" class="linhaForm"> MENU </div> Compartilhar este post Link para o post Compartilhar em outros sites
Omar~ 87 Denunciar post Postado Dezembro 18, 2017 É mais viável você pegar definir uma variável para verificação. Spoiler <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-3.2.1.js" type="text/javascript"></script> <title></title> <script type="text/javascript"> $(document).ready(function () { var active = null; /* DICA! */ /* Emcapsule todos elementos que vai usar na função antes em variável */ /* Pode almentar a velocidade de acesso ao DOM em até 800% */ var data = $('#rowform'); var btn = $('#link_busca_adv'); btn.click(function () { if (!active) { data.css({'display': 'block'}); btn.html("Ocultar Busca Avançada"); active = true; } else { data.css({'display': 'none'}); btn.html("Busca Avançada"); active = null; } }); }); </script> </head> <body> <a id="link_busca_adv" href="#" style="color: #ff0000 !important; display: flex; font-weight: 600; font-size: 0.7em; align-items: center; margin-right: 50px;">Busca Avançada<span class="fa fa-sort-desc" aria-hidden="true" style="color: #FF0000 !important; margin-top: -10px;"></span></a> <div id="rowform" style="display: none;" class="linhaForm"> MENU </div> </body> </html> Também pode ser feito verificando o elemento mais assim acho mais prático. Compartilhar este post Link para o post Compartilhar em outros sites
-Gedson Marcelino- 3 Denunciar post Postado Dezembro 19, 2017 Segue abaixo: https://jsfiddle.net/gedsonmarcelino/c2yj7ua6/ $(function() { $('#link_busca_adv').click(function() { if ( $('#rowform').css('display') == 'none' ) { $('#link_busca_adv').html("Ocultar Busca Avançada"); $('#rowform').show(); } else { $('#link_busca_adv').html("Busca Avançada"); $('#rowform').hide(); } }); }); Compartilhar este post Link para o post Compartilhar em outros sites
DinhoPHP 1 Denunciar post Postado Dezembro 19, 2017 Em 18/12/2017 at 09:11, Omar~ disse: É mais viável você pegar definir uma variável para verificação. Mostrar conteúdo oculto <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-3.2.1.js" type="text/javascript"></script> <title></title> <script type="text/javascript"> $(document).ready(function () { var active = null; /* DICA! */ /* Emcapsule todos elementos que vai usar na função antes em variável */ /* Pode almentar a velocidade de acesso ao DOM em até 800% */ var data = $('#rowform'); var btn = $('#link_busca_adv'); btn.click(function () { if (!active) { data.css({'display': 'block'}); btn.html("Ocultar Busca Avançada"); active = true; } else { data.css({'display': 'none'}); btn.html("Busca Avançada"); active = null; } }); }); </script> </head> <body> <a id="link_busca_adv" href="#" style="color: #ff0000 !important; display: flex; font-weight: 600; font-size: 0.7em; align-items: center; margin-right: 50px;">Busca Avançada<span class="fa fa-sort-desc" aria-hidden="true" style="color: #FF0000 !important; margin-top: -10px;"></span></a> <div id="rowform" style="display: none;" class="linhaForm"> MENU </div> </body> </html> Também pode ser feito verificando o elemento mais assim acho mais prático. Muito obrigado aos dois, e Omar mais uma vez dando aquela força rs e foi o estilo que adotei, alterando algumas coisas aonde a alteração principal se deu no estilo css onde fiz uso do visibility. Gostei da citação do encapsulamento, porém sou muito cru em JQuery, e tenho uma pergunta: isso acontece em var active = null; ? Compartilhar este post Link para o post Compartilhar em outros sites
Omar~ 87 Denunciar post Postado Dezembro 19, 2017 Se eu entendi a pergunta, então a resposta é não. No caso a variável é nula para verificar se uma ação foi executada. Se não então executa tal ação e modifica essa variável para verdadeira. Então se a variável é verdadeira faça outra coisa e mude ela para nula. Quando se usa $('alguma_coisa'), a biblioteca jquery vai executar inúmeros loops buscando esses dados no DOM, então na teoria é, minimizar a quantidade de loop para uma única vez quando o script é carregado, do fazer os mesmos loops repetitivamente toda vez que ativar uma função. E eu sei pouco ou quase nada sobre termos técnicos da jquery, só sei utilizar cada recurso da biblioteca. Eu prefiro javascript puro por ser mais eficiente. Compartilhar este post Link para o post Compartilhar em outros sites
DinhoPHP 1 Denunciar post Postado Dezembro 19, 2017 Ok Omar, agradeço pelos esclarecimentos que certamente irão mudar a minha visão ao desenvolver algo do tipo. Não segui no Javascript por relaxamento, e como o JQuery está sendo bastante usado e pela simplicidade, optei e desejo me aprimorar nele. Muito obrigado por tudo! Compartilhar este post Link para o post Compartilhar em outros sites
