2

Tenho um menu em html com uma classe menu-disable que é quando ele está fechado, preciso trocar essa classe para menu-active que vai ser quando ele estiver aberto.

Não sei muito de javascript e eu precisava fazer um script ou em javascript ou em jquery para trocar a classe no html.

Como eu poderia fazer isso ? Alguém pode me ajudar ?

3
  • Podes explicar melhor a funcionalidade que procuras?
    – Sergio
    22/12/2015 às 22:42
  • Tenho um menu em html com uma classe menu-disable que é quando ele está fechado, preciso trocar essa classe para menu-active que vai ser quando ele estiver aberto. Preciso então de uma função para fazer essa troca de classe com onclick. 22/12/2015 às 22:46
  • usa as funções do jQuery addClass('') e removeClass('') ou toggleClass('') 22/12/2015 às 22:55

2 Respostas 2

6

Para te dar algo para aprender dá uma olhada a este exemplo:

function trocaClasse(elemento, antiga, nova) {
    elemento.classList.remove(antiga);
    elemento.classList.add(nova);
}

setTimeout(function() {
    var div = document.querySelector('div');
    trocaClasse(div, 'azul', 'verde');
}, 2000);
div {
    padding: 50px;
	transition: background-color 1s;
}

.azul {
    background-color: #00b;
}

.verde {
    background-color: #0b0;
}
<div class="azul"></div>

jsFiddle: https://jsfiddle.net/xkftLzuj/

No exemplo criei uma função com 3 parâmetros, ao fim de 3 segundos há uma troca de classe com uma transição de CSS. Usei também um método nativo, parte da API nativa classList. Assim podes adicionar e remover classes a um dados elemento. Podes ainda usar o.toggle('uma_classe');` que é como um interruptor, tira e põe a classe a cada vez que correr.

usando um evento

Podes fazer coisas semelhantes com eventos a chamar esse função. Muitas vezes não precisas de 2 classes, mas sim só uma. A ausência da classe já faz o que é pretendido, um dos estados.

Um outro exemplo, parecido com o de cima mas com eventos:

var menu = document.querySelector('div.menu');
var botao = document.querySelector('button#interruptor');
botao.addEventListener('click', function() {
    var aberto = menu.classList.contains('abrir');
    menu.classList.toggle('abrir');
    this.innerHTML = aberto ? 'abrir' : 'fechar';
});
.menu {
    padding: 50px;
    margin-top: -100px;
    transition: margin-top 1s;
    background-color: #ccf;
    margin-bottom: 10px;
}

.abrir {
    margin-top: 0px;
}
<div class="menu"></div>
<button id="interruptor" type="button">abrir</button>

Neste exemplo uso o .addEventListener para saber quando um click ocorre e depois o toggle para trocar a classe. A parte this.innerHTML = aberto ? 'abrir' : 'fechar'; é para trocar o texto do botão (que é o this dentro dessa callback). Uso também o .contains para saber se o elemento tem uma dada classe...

jsFiddle: https://jsfiddle.net/xkftLzuj/1/

Espero ter-te dado algo para poderes usar no teu problema!

1
  • 1
    @Sergio Muito Obrigado, ajudou bastante o seu código e as suas dicas! 23/12/2015 às 0:02
2

Vou fazer somente um complemento, a resposta do Sergio já matou a pergunta com ótimas soluções.

Acredito que nesse caso não há necessidade de trocar as classes, .menu-disable pode nem existir.

O elemento (o conteúdo do menu) pode ter um display:none inicialmente e você utilizará Javascript somente para adicionar/remover uma classe que o torna visível.

var $menu        = document.querySelector('nav'),
    $menuContent = document.querySelector('nav ul');

$menu.addEventListener('click', function(event){
  if(event.target == $menuContent)
    return; // Para evitar fechar o menu quando clicar no 'conteúdo'.
  
  $menuContent.classList.toggle('active');
}, false);
nav {
  border: 1px solid #ccc;
  padding: 6px
}

nav ul {
  display: none /* Inicialmente o conteúdo do menu não é exibido */
}

nav ul.active {
  display: block /* Somente quando a classe 'active' estiver presente ele será mostrado. */
}
<nav>
  Menu
  <ul>
    conteúdo
  </ul>
</nav>

Se em determinado ponto houver necessidade de saber se o menu está aberto ou não, pode usar classList#contains(), por exemplo:

if($menuContent.classList.contains('active')){
  // Está aberto.
} else {
  // Está fechado.
}

Finalizando, eu tenho costume de usar classList por conta do suporte que dou. Mas vale ressaltar que nem todos os navegadores possuem esta propriedade implementada, como pode ser visto nesse site. Felizmente o pessoal da Mozilla disponibilizou uma implementação caso você queira usar classList em um navegador sem suporte a este recurso.

0

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 .