如何在没有jQuery的情况下切换类？

Question

我正在尝试在没有jQuery的情况下切换onClick类。我写了剧本，但在我看来它错了） 我需要将--active修饰符添加到menu__button类

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

和我的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

但是正确的方法是什么？

Answer 1

您似乎正在使用classList。 classList有一个内置的toggle，所以：

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