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.