点击触发下拉菜单时如何仅展示当前点击项对应的下拉列表

你的现有代码在点击.dropdown元素时，会遍历所有.navbar__items节点统一切换drop类，才会出现点击任意一个导航项所有下拉列表全部展开的问题，只需针对当前点击元素对应的下拉列表操作即可。

JS 逻辑修改 #

替换原有JS代码为以下内容：

const dropDown = document.querySelectorAll('.dropdown')

dropDown.forEach(element => {
  element.addEventListener('click', () => {
    // 获取当前点击的dropdown对应的下拉列表节点
    const currentDropList = element.nextElementSibling
    // 仅切换当前对应下拉的显示状态
    currentDropList.classList.toggle('drop')
  })
})

如果需要实现点击一个下拉时自动关闭其他已展开的下拉，可使用以下优化逻辑：

const dropDown = document.querySelectorAll('.dropdown')
const allDropLists = document.querySelectorAll('.navbar__items')

dropDown.forEach(element => {
  element.addEventListener('click', () => {
    const currentDropList = element.nextElementSibling
    // 先关闭所有非当前的下拉列表
    allDropLists.forEach(list => {
      if (list !== currentDropList) {
        list.classList.remove('drop')
      }
    })
    // 切换当前下拉的显示状态
    currentDropList.classList.toggle('drop')
  })
})

可选CSS优化 #

你当前给.navbar设置了relative定位，会导致所有下拉列表都定位在整个导航栏的同一个位置，建议给每个导航项父容器设置相对定位，让下拉对应到各自的导航项：

.nav-menu {
  position: relative;
}

利用DOM的nextElementSibling属性，直接获取当前点击的.dropdown元素后面相邻的下拉列表节点，仅对该目标节点做类名操作，不会影响其他节点的状态。

内容的提问来源于stack exchange，提问作者Gaurav Tamang