Comment faire basculer la classe d'un élément en JavaScript pur ?

Question

Je cherche un moyen de convertir ce code jQuery (qui est utilisé dans la section menu réactif) en JavaScript pur.

S'il est difficile à mettre en œuvre, vous pouvez utiliser d'autres cadres JavaScript.

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

Answer 1

Voici un code pour IE >= 9 en utilisant split(" ") sur le nom de classe :

function toggleClass(element, className) {
    var arrayClass = element.className.split(" ");
    var index = arrayClass.indexOf(className);

    if (index === -1) {
        if (element.className !== "") {
            element.className += ' '
        }
        element.className += className;
    } else {
        arrayClass.splice(index, 1);
        element.className = "";
        for (var i = 0; i < arrayClass.length; i++) {
            element.className += arrayClass[i];
            if (i < arrayClass.length - 1) {
                element.className += " ";
            }
        }
    }
}

Answer 2

Je sais que je suis en retard, mais il se trouve que j'ai vu ceci et j'ai une suggestion Pour ceux qui recherchent un support multi-navigateurs, je ne recommanderais pas le changement de classe via JS. C'est peut-être un peu plus de travail mais c'est mieux supporté par tous les navigateurs.

document.getElementById("myButton").addEventListener('click', themeswitch);

function themeswitch() {
  const Body = document.body
  if (Body.style.backgroundColor === 'white') {
    Body.style.backgroundColor = 'black';
  } else {
    Body.style.backgroundColor = 'white';
  }
}

body {
  background: white;
}

<button id="myButton">Switch</button>

Answer 3

function navbarToggler() {
const collapseBtn = document.querySelector('.collapseBtn').classList
collapseBtn.toggle('collapse')

}