如何使用 JavaScript 單獨切換選單項目的 classList？

Question

我的頁腳有幾個下拉項目。我想專門針對單擊的元素切換“活動”類別列表。到目前為止我的程式碼是：

我有多個這樣的容器：

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>

目前，這只是從第一個清單中選擇“ul”。它不適用於單獨的其他列表，因此我顯然在 JavaScript 中錯誤地選擇了它，並且我不確定執行此操作的最佳方法。

Answer 1

HTML 結構不清楚。我相信您的話，每個頁腳項目都具有相同的結構，並在此範例中放置了兩個。基本上，代碼向上到共同祖先，然後向下到子級。

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