使用Javascript更改字体图标-展开/折叠手风琴

我有一个可以伸缩的手风琴。 我设置了一些很棒的图标来帮助说明它的打开和关闭时间——但是，我似乎无法让它更改图标

我是根据我看到的其他StackOverflow帖子来了解这一点的——但由于某种原因，我似乎无法让我的帖子发挥作用。如果让我猜的话，我肯定错过了jQuery的关键。我在那里挣扎，所以我假设我没有选择正确的元素

我将手风琴的代码块放入JSFIDLE中：

正如我的JSFIDLE中的第14行所示，我认为是什么让我绊倒了——因为它不起作用，所以我暂时把它注释掉了

我试着写一些东西到console.log来帮助确定我是否在代码中选择了正确的部分，但不幸的是，我无法找到答案

为了使插入符号在展开时旋转到向下位置，我需要更改什么

---

注意：我有几个箭头，我测试了不同的图标，但我认为它应该是相同的右前插入符号/下前插入符号与右前角/下前插入符号。

您可以在onclick listener for toggle类中添加此代码

if(this.classList.value.indexOf("fa-caret-right") > -1){
    this.classList.add("fa-caret-right");
    this.classList.remove("fa-caret-right");
}else
{
    this.classList.add("fa-caret-right");
    this.classList.remove("fa-caret-down");
}

---

您需要使用最新版本的FA，即5.0.9

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>

---

您可以在小提琴中使用结果：

也许可以切换类？好的，您知道您混合了vanilla js和jquery，对吧？根据我所读的内容，我认为这也会起作用。我在另一篇帖子中发现了这样一句话：切换类可以工作，然后你可以做fa-rotate-90或任何度数。我一直在努力让它工作。我用不同的选择器在代码中尝试了几种不同的方法。我还在学习jQuery，所以我想我肯定是在什么地方搞砸了。如果引用我的JSFIDLE，是否有.toggleClass的示例。如果没有，我可以继续尝试，但我似乎遗漏了一些东西。对，所以我查看了小提琴，对其进行了大量修改以使用jquery，发现.fas被没有fa类的SVG取代。这大概是FA现在处理图标的方式，但这意味着您不能动态修改它们。

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

$(this)
    .find('[data-fa-i2svg]')
    .toggleClass('fa-angle-down')
    .toggleClass('fa-angle-right');