求助：jQuery函数无法实现点击列表项切换背景色的问题排查

嘿，我来帮你搞定这个列表项背景色切换的问题！先理清楚你的核心需求：点击某个列表项时，它的背景色切换（有/无），但点击其他列表项时，当前项激活背景色，之前激活的项恢复默认——本质是单选逻辑+支持当前项的切换取消（如果点击已激活的项，要取消它的背景色）。

先补全你的代码逻辑，同时给你完整的可运行方案：

第一步：先准备基础的HTML和CSS #

首先得给列表项定义默认样式和激活样式，用CSS类来控制背景色会比直接操作style属性更灵活：

<ul class="nav">
  <li class="l1">列表项1</li>
  <li class="l2">列表项2</li>
  <li class="l3">列表项3</li>
</ul>

.nav li {
  padding: 8px 15px;
  cursor: pointer;
  background-color: #f5f5f5; /* 默认背景色 */
  margin: 4px 0;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.nav li.active {
  background-color: #2196F3; /* 激活时的背景色，可自行修改 */
  color: white;
}

第二步：修复你的jQuery代码 #

你已经用到了事件委托（$('.nav').on('click', 'li', ...)），这部分是对的，能兼容动态生成的列表项。问题出在逻辑不完整，下面分两种常用场景给出代码：

场景1：纯单选（点击任何项都激活它，其他项取消，点击已激活项不会取消）

这是最常见的导航栏选中逻辑：

$('.nav').on('click', 'li', function() {
  // 第一步：移除所有列表项的激活类，恢复默认样式
  $('.nav li').removeClass('active');
  // 第二步：给当前点击的列表项添加激活类
  $(this).addClass('active');
});

场景2：支持切换当前项（点击已激活的项会取消它的背景色，点击其他项则激活其他并取消当前）

如果你需要点击已选中的项时，它能恢复默认，就用这个逻辑：

$('.nav').on('click', 'li', function() {
  // 先判断当前项是否已经激活
  const isCurrentlyActive = $(this).hasClass('active');
  
  // 第一步：移除所有列表项的激活类
  $('.nav li').removeClass('active');
  
  // 第二步：如果当前项之前没激活，就添加激活类；如果已经激活，就跳过（实现切换取消）
  if (!isCurrentlyActive) {
    $(this).addClass('active');
  }
});

为什么你的原代码会有问题？ #

你写到$('.nav li').removeC...应该是想调用removeClass('active')，但缺少了后续给当前点击项添加激活类的步骤，或者没处理“切换当前项”的判断逻辑，导致点击后要么所有项都恢复默认，要么只有取消没有激活。

用CSS类来控制样式而不是直接修改background-color属性，好处是样式和逻辑分离，后续修改颜色只需要改CSS就行，不用动JS~

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