如何使用 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