jQuery点击导航菜单实现.open类添加/移除及互斥效果问题

你的问题出在代码逻辑顺序：每次点击先移除所有open类，再强制给当前元素添加，导致就算当前元素原本有open，也会被先移除再重新加上，永远没法取消选中状态。

调整逻辑就能解决，下面给两种可行方案：

方案一：判断类状态后处理 #

先判断当前点击的<li>是否已有open类，再决定后续操作：

$('li a').on('click', function(e) {
    // 阻止a标签默认跳转（按需保留）
    e.preventDefault();
    const currentLi = $(this).parent();
    // 先移除所有li的open类
    $('li').removeClass('open');
    // 只有当前li原本没有open类时，才添加
    if (!currentLi.hasClass('open')) {
        currentLi.addClass('open');
    }
});

方案二：用toggleClass配合排除当前元素 #

先移除除当前元素外所有<li>的open类，再单独切换当前元素的类，避免干扰切换逻辑：

$('li a').on('click', function(e) {
    e.preventDefault();
    const currentLi = $(this).parent();
    // 只移除其他li的open类
    $('li').not(currentLi).removeClass('open');
    // 切换当前li的open类
    currentLi.toggleClass('open');
});

你之前尝试toggleClass无效，大概率是因为先执行了$('li').removeClass('open')把当前元素的类也移除了，之后toggleClass又会重新加上，等于白操作。改成只移除其他元素的类，再切换当前的就没问题了。

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a href="#">Item 1</a>
    </li>
    <li>
      <a href="#">Item 2</a>
    </li>
  </ul>
</nav>

<style>
ul {
  list-style: none;
  padding: 0;
}

li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.open {
  background-color: yellow;
}
</style>

<script>
$('li a').on('click', function(e) {
    e.preventDefault();
    const currentLi = $(this).parent();
    $('li').not(currentLi).removeClass('open');
    currentLi.toggleClass('open');
});
</script>

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