0

Tenho a seguinte linha:

<li id="fecharMenu">
    <i class="mdi mdi-window-close mdi-24px" id="iconFecharMenu"></i>
    <a href="#"></a>
</li>

Quando o usuário clicar na <li id="fecharMenu">, o menu fecha e eu gostaria que trocasse o icone e consequentemente, o id da <li> do <i>, ficando assim:

<li id="abrirMenu">
    <i class="mdi mdi-menu mdi-24px" id="iconAbrirMenu"></i>
    <a href="#"></a>
</li>

JavaScript que eu tenho atualmente, ele "fecha" o menu apenas, gostaria de trocar o icone e o id da li e do icon também, pra ai poder criar um evento ao clicar no botão de abrir o menu:

document.getElementById("fecharMenu").addEventListener("click", fecharMenu);
function fecharMenu() {
    document.getElementById("barraLateral").style.width = "60px";
}

Como eu poderia fazer somente com JavaScript, sem usar Jquery?

2
  • aonde está o ícone?
    – mercador
    Commented 9/02/2018 às 11:41
  • É o <i class="mdi mdi-menu mdi-24px" id="iconAbrirMenu"></i>. É icone do Material Design Icons.
    – D. Watson
    Commented 9/02/2018 às 11:47

2 Respostas 2

1

Você pode trocar os atributos da seguinte forma:

document.querySelector("#fecharMenu").addEventListener("click", function(){
   this.id = "abrirMenu"; // troca o id da <li>
   var i = this.children[0]; // seleciona o <i>
   i.id = "iconAbrirMenu"; // troca o id do <i>
   i.className = i.className.replace("mdi-window-close","mdi-menu"); // substitui a classe do <i>
});
0

Você pode utilizar o método setAttribute para alterar o Id, da seguinte forma:

document.getElementById("fecharMenu").setAttribute("id", "abrirMenu");

Nesse caso, estou supondo que você tem uma regra css para cada Id de menu:

#fecharMenu {
    background-image : (...)
}
#abrirMenu{
    background-image : (...)
}

Desta forma, ao modificar o id, você mudará o ícone automaticamente.

Mas, acredito que manipular o Id dessa forma não seja a melhor prática. Acredito que manipulando classes seja mais adequado, da seguinte forma:

HTML:

<li id="menu" class="aberto">
    <i class="mdi mdi-window-close mdi-24px" id="iconFecharMenu"></i>
    <a href="#"></a>
</li>

JS:

document.getElementById("menu").addEventListener("click", aoClicarMenu);
function aoClicarMenu(event) {
    if (event.target.classList.contains('aberto'){
        event.target.classList.remove('aberto');
        event.target.classList.add('fechado');
    } else {
        event.target.classList.remove('fechado');
        event.target.classList.add('aberto');
    }
    document.getElementById("barraLateral").style.width = "60px";
}

O código acima verifica se o elemento DOM que disparou o evento, no caso, o li, contém a classe 'aberto', se sim, ela é removida, e a classe 'fechado' é adicionada, e vice-versa. Assim você vai conseguir alternar o comportamento do elemento a cada clique que ele recebe. Para isso, você teria que ter um CSS para definir o ícone do menu aberto, ou fechado:

.aberto {
    background-image : (...)
}
.fechado {
    background-image : (...)
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .