Comment basculer individuellement la liste de classes d'un élément de menu à l'aide de JavaScript ?

Question

J'ai plusieurs éléments déroulants dans mon pied de page. Je souhaite basculer la liste de classes "actives" spécifiquement pour l'élément cliqué. Mon code jusqu'à présent est :

J'ai plusieurs conteneurs comme celui-ci :

let dropDowns = document.querySelectorAll('.footer-arrow-container')
let dropDownList = document.querySelector('.footer-items-list')

dropDowns.forEach((dropDown) => {
  dropDown.addEventListener('click', () => {
    dropDownList.closest('ul').classList.toggle('active')
  })
})

.footer-items-list {
  display: none;
}

.active {
  display: flex;
}

    <div class="footer-item-container">
      <div class="footer-arrow-container">
        <!-- dropDowns ; querySelectorAll -->
        <h2 class="footer-item-title">
          Test
        </h2>
        <img/>
      </div>
      <div class="footer-dropdown-list-container">
        <ul class="footer-items-list">
          <!-- dropDownList : querySelector -->
          <li>List item 1</li>
          <li>List item 2</li>
        </ul>
      </div>
    </div>

<div class="footer-item-container">
      <div class="footer-arrow-container">
        <!-- dropDowns ; querySelectorAll -->
        <h2 class="footer-item-title">
          Test
        </h2>
        <img/>
      </div>
      <div class="footer-dropdown-list-container">
        <ul class="footer-items-list">
          <!-- dropDownList : querySelector -->
          <li>List item 1</li>
          <li>List item 2</li>
        </ul>
      </div>
    </div>

Actuellement, cela sélectionne simplement "ul" dans la première liste. Cela ne fonctionne pas avec d'autres listes distinctes, donc je l'ai évidemment mal choisi en JavaScript et je ne suis pas sûr de la meilleure façon de procéder.

Answer 1

La structure HTML n’est pas claire. Je vous crois sur parole que chaque élément de pied de page a la même structure et en a placé deux dans cet exemple. En gros, le code remonte jusqu'à l'ancêtre commun puis descend jusqu'aux enfants.

let dropDowns = document.querySelectorAll('.footer-arrow-container')

dropDowns.forEach((dropDown) => {
  dropDown.addEventListener('click', () => {
    dropDown.closest('.footer-item-container').querySelector('.footer-items-list').classList.toggle('active')
  })
})

.footer-items-list {
  display: none;
}

.active {
  display: flex;
}

  

    
    

      Test
    
    
  
  

    

      
      
List item 1
      
List item 2
    
  


  

    
    

      Test 2
    
    
  
  

    

      
      
List item 3
      
List item 4