Vanilla JS rimuove la classe da tutti gli altri elementi oltre alla classe 'attiva'

Question

Sto provando a creare un menu a discesa con Vanilla JavaScript e non riesco a capire il modo migliore per aggiungere una classe attiva al menu a discesa cliccato, e quindi allo stesso tempo rimuovere tutte le altre classi attive dagli elementi di pari livello.

finora questo è quello che ho per quanto JS:

var _dropdowns = [].slice.call(document.getElementsByClassName('main-menu-li_dropdown')); 

      _dropdowns.forEach(function(dropdowns) { 
       dropdowns.addEventListener('click', function(event){ 
        event.preventDefault(); 
        console.log(this !== event.target); 
        this.classList.toggle('active'); 
       }); 
      }); 

Ed ecco la mia marcatura:

<nav id="main-nav"> 
    <ul> 
     <li class="main-menu-li_dropdown"> 
      <a href="">link</a> 
      <ul class="sub-nav"> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
      </ul> 
     </li> 
     <li class="main-menu-li_dropdown"> 
      <a href="">link</a> 
      <ul class="sub-nav"> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
      </ul> 
     </li> 
     <li class="main-menu-li_dropdown"> 
      <a href="">link</a> 
      <ul class="sub-nav"> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
      </ul> 
     </li> 
     <li class="main-menu-li_dropdown"> 
      <a href="">link</a> 
      <ul class="sub-nav"> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
      </ul> 
     </li> 
     <li class="main-menu-li_dropdown"> 
      <a href="">link</a> 
      <ul class="sub-nav"> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
       <li><a href="">link</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

Answer 1

è possibile scorrere tutti gli elementi e rimuovere la classe, poi aggiungi la classe all'elemento su cui è stato fatto clic.

Ecco un esempio:

http://jsbin.com/rivogelaqu/edit?html,js,output

let dropDowns = Array.from(document.querySelectorAll('.main-menu-li_dropdown')); 

const handleClick = (e) => { 
    e.preventDefault(); 
    dropDowns.forEach(node => { 
    node.classList.remove('active'); 
    }); 
    e.currentTarget.classList.add('active'); 

} 

dropDowns.forEach(node => { 
    node.addEventListener('click', handleClick) 
}); 

Edit: Alternativa Click Handler

Ecco un gestore di clic alternativo che evita un loop su ogni click e solo controlli per la elemento. Potrebbe essere più performante.

const handleClick = (e) => { 
    e.preventDefault(); 
    const active = document.querySelector('.active'); 
    if(active){ 
    active.classList.remove('active'); 
    } 
    e.currentTarget.classList.add('active'); 
}