Javascript só funciona após dois cliques

[luansilva71 0]

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

 

 

 

[Omar~ 87]

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 0]

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~ 87]

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 0]

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