jQuery切换与移除类异常：菜单箭头点击后无法归位求助

问题分析 #

你当前的代码错误地对.menu容器执行removeClass("expanded")操作，但实际expanded类是添加在<i>箭头元素上的，这导致切换新菜单时，旧菜单的箭头无法恢复初始状态。

修正后的代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.2/css/all.css">

<div class="menu"></div>

CSS

.expanded {
  transform: rotate(90deg);
  opacity: 1;
}

JavaScript

for(var i=0; i<5; i++) {
  var el = "<div class='click' style='padding: 10px; cursor: pointer;'><i class='fa-regular fa-angle-right'></i></div>";
  
  $(".menu").append(el);
}

$(".click").click(function(e) {
  // 先移除所有箭头的expanded类，让所有箭头归位
  $(".click i").removeClass("expanded");
  // 再切换当前点击箭头的状态
  $(this).find("i").toggleClass("expanded");
});

可选优化（单选模式） #

如果需要始终只有一个菜单箭头处于展开状态（无法通过点击同一菜单收起），可以将toggleClass替换为addClass：

$(".click").click(function(e) {
  $(".click i").removeClass("expanded");
  $(this).find("i").addClass("expanded");
});

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