JavaScript实现点击li添加selected类 多ul场景选中冲突问题求解

• HTML规范要求id属性全局唯一，你为两个ul设置了相同的id="top-nav"，本身属于不符合规范的写法，会导致DOM选择器出现预期外的行为。
• 原有JS逻辑把所有匹配到的li放在同一个集合里，点击任意li时会遍历全部li移除selected类，没有按所属ul分组处理，自然会跨ul清除选中状态。

修正后的HTML代码 #

将重复的id替换为class：

<ul class='top-nav'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul class='top-nav'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

修正后的JS代码 #

调整逻辑为仅清除当前点击li所属ul的选中状态：

const menuLis = document.querySelectorAll(".top-nav > li");

for (let li of menuLis) {
  li.addEventListener("click", function(){
    // 查找当前li所属的ul容器
    const currentUl = this.closest('.top-nav');
    // 仅移除当前ul下所有li的selected类
    currentUl.querySelectorAll('li').forEach(li => li.classList.remove('selected'));
    // 为当前点击的li添加选中类
    this.classList.add('selected');
  });
}

CSS代码无需修改 #

.selected{color:red}

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