Bagaimana untuk menogol classList item menu secara individu menggunakan JavaScript?

Question

Saya mempunyai beberapa item lungsur dalam pengaki saya. Saya mahu menogol senarai kelas "aktif" khusus untuk elemen yang diklik. Kod saya setakat ini ialah:

Saya mempunyai beberapa bekas seperti ini:

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>

Pada masa ini ini hanya memilih "ul" daripada senarai pertama. Ia tidak berfungsi dengan senarai lain yang berasingan, jadi saya jelas telah salah memilihnya dalam JavaScript dan saya tidak pasti cara terbaik untuk melakukan ini.

Answer 1

Struktur HTML tidak jelas. Saya mengambil perkataan anda bahawa setiap item pengaki mempunyai struktur yang sama dan meletakkan dua dalam contoh ini. Pada asasnya, kod itu naik kepada nenek moyang yang sama dan kemudian turun kepada kanak-kanak.

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