Publicado em 31 de dez.

Javascript só funciona após dois cliques

Estou usando um menu lateral num site e queria que ele retraísse com um clique no botão... acontece que isso só está acontecendo após dois cliques!!

	function resp() {

	       var clique = document.getElementById("btn-menu");

	       var menuLateral = document.getElementById("menu-lateral");

	 

	       clique.onclick = function (e) {

	            e.preventDefault();

	            menuLateral.classList.toggle('toggleMenu');

	      };

	}

	 

	estou usando um link para chamar a função script <a href="#" onClick="resp()" id="btn-menu"/>

	 

	>menu-lateral é o id da div do menu lateral

	>toggleMenu é  a classe que é adicionada a div do menu lateral

	 

	Esse código eu peguei como base de outra pessoa, porém ela não usava como function() e não tinha um onClick na tag <a>... porém assim o meu não funciona... alguém sabe o que pode ser?? é chato ter que clicar duas vezes pro menu retrair (isso só acontece no primeiro toque depois de atualizado a página)

	 

	Aí o site

	 

	 

	![imagem](https://forum.imasters.com.br/monthly_2017_12/image.png.fb3b30ab0f35727262f2c7465bf042d9.png)

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Omar~· 1 de jan.

E problema está aqui: onClick="resp()"

Quando você aciona o evento onClick a função "resp()" é instanciada e define os elementos.

No clique.onclick vai pegar o rótulo criado pela função para acionar o evento que vai fazer seu código.

Acontece que no momento a função resp() não possui esse evento que só é criado depois que você chama (primeiro click).

Ou seja faça tudo de uma vez.

function resp() {
 var clique = document.getElementById("btn-menu");
 var menuLateral = document.getElementById("menu-lateral");
 menuLateral.classList.toggle('toggleMenu');
 return false; // -> Isso vai fazer o mesmo que preventDefault
}

	 

	Se fosse meu caso primeiramente trocaria a tag ID por CLASS, e trabalharia com uma classe, assim sendo posso assumir o controle dessa ação dentro e fora de funções controlando da forma que bem desejar. Veja:

 Spoiler

 O botão ficaria assim

<a href="#" class="btn-menu" onClick="obj.acionar()"/>

  

 No final do body criaria o objeto instanciando a classe

<script>obj = new resp();</script>

  

 E no arquivo JS adicionaria o script da classe:

var resp = function () {
 var clique = document.querySelector(".btn-menu");
 var menuLateral = document.querySelector(".menu-lateral");

 this.acionar = function () {
 menuLateral.classList.toggle('toggleMenu');
 };
};

luansilva71· 1 de jan.

Deu Certo!!! uma dúvida, se caso eu quisesse que o menu ficasse retraído mesmo após atualizar a página, eu teria que implantar ajax ou dá pra fazer isso com um javascript básico??

Omar~· 2 de jan.

12 horas atrás, luansilva71 disse:

Deu Certo!!! uma dúvida, se caso eu quisesse que o menu ficasse retraído mesmo após atualizar a página, eu teria que implantar ajax ou dá pra fazer isso com um javascript básico??

Nesse caso aí é pura questão de CSS

luansilva71· 2 de jan.

9 horas atrás, Omar~ disse:

Nesse caso aí é pura questão de CSS

mas digo assim, eu cliquei no botão pra ficar retraído, porém quando atualizo a página ele volta ao normal, eu queria que continuasse retraído até eu clicar novamente, mesmo atualizando a página várias vezes