Javascript 手风琴导航的切换图标

我试着遵循SO上的一个例子，它的工作原理与这个例子一样，只是它没有改变图标

我有一个手风琴导航，默认情况下有一个图标，然后它应该在打开时切换到另一个图标，然后在导航中单击“关闭/新建”链接时返回到原始图标

手风琴方面工作得很好，这是给我的问题图标

$（函数（）{
$（'.nav main>li>a'）。单击（函数（e）{
e、 preventDefault（）；//禁用链接
$（'.nav-main>li>a.active'）。下一步（'.nav-main\uu sub'）.slideUp（）；
if（！$（this.hasClass（'active'））{//if不是'a.active'
$（this）.next（'.nav-main_uusub'）.slideToggle（）；
$（'.nav main>li>a'）。查找（'i'）。删除类（'fa-fa-angle-up'）。添加类（'fa-fa-angle-down'）；
$（this.find（'i'）.addClass（'fa-fa-angle-up'）；
$（'.nav main>li>a'）.removeClass（'active'）；
$（this.addClass（'active'）；
}否则{
$（this）.find（'i'）.removeClass（'fa-fa-angle-up'）.addClass（'fa-fa-angle-down'）；
$（此）.removeClass（“活动”）；
}
});
});
@charset“UTF-8”；
/*
-------------------------
航行
-------------------------
*/
.导航{
字体系列：“Avinerlt Heavy”，Helvetica，Arial，无衬线；
字体大小：1.125rem；
}
.导航a{
颜色：#00539b；
}
.导航a:悬停{
颜色：#f6b242；
}
.nav a i{
颜色：#f6b242；
垂直对齐：基线！重要；
字号：700；
浮动：对；
}
.nav main>li{
边框底部：1px实心#00539b；
填充：30px0；
}
.nav main>li：第一种类型{
填充顶部：0；
}
.nav main>li：类型的最后一个{
边框底部：无；
}
.nav main>li>a{
填充：0.7雷姆；
}
.nav-main_uuuu分接头{
显示：无；
字体大小：0.9375rem；
字体系列：“Avinerlt Roman”，Helvetica，Arial，无衬线；
}
.nav-main_uuuuSUB li>a{
左侧填充：0；
}
/*
-------------------------
模块
-------------------------
*/





















































































当您为
$（this）
设置类时，您还需要删除添加到上一行中所有内容的向下箭头类。因此，在这一行之后：

$(this).find('i').addClass('fa-angle-up');

$(this).find('i').removeClass('fa-angle-down');

添加此行：

$(this).find('i').addClass('fa-angle-up');

$(this).find('i').removeClass('fa-angle-down');

（注意，我在
addClass
和
removeClass
中取出了类
fa
，因为它不需要被添加或删除——它保持不变。）

Codepen:
当您为
$（this）
设置类时，您还需要删除添加到上行中所有内容的向下箭头类。因此，在这一行之后：

$(this).find('i').addClass('fa-angle-up');

$(this).find('i').removeClass('fa-angle-down');

添加此行：

$(this).find('i').addClass('fa-angle-up');

$(this).find('i').removeClass('fa-angle-down');

（注意，我在
addClass
和
removeClass
中取出了类
fa
，因为它不需要被添加或删除——它保持不变。）

代码笔：
谢谢！我在单曲
fa
（在我下面的例子中）上也做了同样的计算，谢谢！我在单个
fa
上也做了同样的计算（在下面的示例中）