Wie klasse ich die Klasse ohne jQuery um?

Question

Ich versuche, eine Klasse onClick ohne jQuery zu wechseln. Ich schrieb das Drehbuch, aber es scheint mir, es falsch) Ich brauche --active Modifikator zu menu__button Klasse

<div class="grid__menu"> 
     <i class="material-icons md-48 menu__button">dashboard</i> 
    </div> 

und meine JS ((

(function() { 
    var menuTag = ".grid__menu i"; 
    var activeModificator = "--active"; 
    var className = 'menu__button'; 
    var menu_button = document.querySelector(menuTag);  

menu_button.onclick =function() {  
    if (menu_button.classList.contains(className)) {  
    document.querySelector(menuTag).classList.add(className +  activeModificator); 
    document.querySelector(menuTag).classList.remove(className); 
     } else if (menu_button.classList.contains(className+activeModificator)) { 
    document.querySelector(menuTag).classList.add(className); 
    document.querySelector(menuTag).classList.remove(className+activeModificator);  
    } else { 
     return  
     } 
    };  
})(); 

jsFiddle

aber was für ein Recht hinzufügen Weg?

Answer 1

Sie scheinen zu verwenden classList. classList hat eine Built-i n toggle, also:

menu_button.onclick = function() { 
    menu_button.classList.toggle(className); 
    menu_button.classList.toggle(className + activeModificator); 
};