如何为下拉菜单点击元素添加active类并实现菜单项间激活状态切换

问题原因 #

你的代码存在两个核心问题导致激活状态无法切换：

1. 激活类添加对象错误：this.parentNode.classList.add('active')中的this指向被点击的<li>元素，parentNode对应的是外层的<ul class="menu">容器，你把active类加到了列表容器上，自然不会触发菜单项的激活样式。
2. 重复绑定事件：你先后通过for循环和forEach给同一个菜单项绑定了两次点击事件，逻辑冗余可以合并优化。

修正后的完整JS代码 #

let dropdown = document.querySelector('.dropdown-select');
let dropdownItems = document.querySelectorAll('.dropdown-select .menu li');
const results = document.querySelectorAll('.tabbed-content div')

// 下拉框展开收起逻辑
dropdown.addEventListener('click', (e) => {
  // 点击菜单项时不触发展开收起逻辑，如需点击后自动关闭可删除该行
  if(e.target.closest('.menu li')) return
  dropdown.classList.toggle('closed');
  dropdown.classList.toggle('open');
});

// 合并菜单项点击逻辑
dropdownItems.forEach(item => {
  item.addEventListener('click', function() {
    // 移除已有菜单项的激活状态
    const activeItem = document.querySelector('.menu li.active');
    if(activeItem) activeItem.classList.remove('active');
    // 给当前点击的菜单项加激活类
    this.classList.add('active');
    // 切换对应内容显示
    results.forEach(f => f.style.display = f.id == this.dataset.target ? "block" : "none");
    // 如需点击选项后自动收起下拉，可取消注释下面两行
    // dropdown.classList.add('closed');
    // dropdown.classList.remove('open');
  })
})

改动说明 #

• 修正了active类的添加目标，正确绑定到被点击的菜单项上
• 合并了两次重复的点击事件绑定，精简代码逻辑
• 下拉展开逻辑增加了点击区域判断，避免点选菜单项时触发不必要的下拉状态切换
• 保留了可选的点击后自动关闭下拉的逻辑，可根据业务需求开启

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