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

Réponse 2014 : classList.toggle() est la norme et est prise en charge par la plupart des navigateurs .

Les navigateurs plus anciens peuvent utiliser utiliser classlist.js pour classList.toggle() :

var menu = document.querySelector('.menu') // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

Soit dit en passant, vous ne devriez pas utiliser les ID ( ils font fuir les globaux dans le JS window objet ).

Answer 2

Voici la solution mise en œuvre avec ES6

const toggleClass = (el, className) => el.classList.toggle(className);

exemple d'utilisation

toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore

Answer 3

Voici un exemple : JS Fiddle

function toggleClass(element, className){
    if (!element || !className){
        return;
    }

    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

Answer 4

Pas besoin de regex, il suffit d'utiliser classlist

var id=document.getElementById('myButton');

function toggle(el,classname){
if(el.classList.contains(classname)){
el.classList.remove(classname)
}
else{
el.classList.add(classname)
}
}

id.addEventListener('click',(e)=>{

toggle(e.target,'red')
})

.red{

background:red

}

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

Utilisation simple ci-dessus Exemple

var id=document.getElementById('myButton');

function toggle(el,classname){
el.classList.toggle(classname)
}

id.addEventListener('click',(e)=>{

toggle(e.target,'red')
})

.red{

background:red

}

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

Answer 5

Celle-ci fonctionne également dans les versions antérieures d'IE.

function toogleClass(ele, class1) {
  var classes = ele.className;
  var regex = new RegExp('\\b' + class1 + '\\b');
  var hasOne = classes.match(regex);
  class1 = class1.replace(/\s+/g, '');
  if (hasOne)
    ele.className = classes.replace(regex, '');
  else
    ele.className = classes + class1;
}

.red {
  background-color: red
}
div {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid black;
}

<div class="does red redAnother " onclick="toogleClass(this, 'red')"></div>

<div class="does collapse navbar-collapse " onclick="toogleClass(this, 'red')"></div>