Javascript 动态使用jquery更改图标

我已经创建了一个，其中一些有子菜单。我希望当用户单击菜单项时，带有

fa-chevron-down

（向下箭头图标）的菜单项更改为

fa-chevron-up

（向上箭头图标），并在用户单击其他任何位置时更改回原来的菜单项。另外我还有两个要求

1） 因为我对jquery非常陌生，所以我编写的jquery代码似乎 做这个把戏，但是有更好的方法吗？（注意，当一个菜单项被点击两次时，滑动会发生两次。这很烦人）

2） 当用户调整窗口大小时，html元素不会保留在原来的位置 散开

提前谢谢

更新：

---

谢谢你解决了我的问题。我进一步改进了我的问题，它工作得很好。以下是更改图标的最后一个*****

，您可以在单击事件中轻松执行以下操作：

$(this).find($(".fa")).removeClass('fa-chevron-down').addClass('fa-chevron-up');

有关更多信息，请查看JSFIDLE示例：

---

我认为没有必要换课

如果您只想将

fa-chevron-down

图标更改为

fa-chevron-up

图标，而不是切换类别，只需对

fa-rotate-180

使用

toggleClass

fa-rotate-180

将旋转您的图标，这可能会解决您的问题。无需添加/删除单个类

比如说：

$('selector').click(function(){
    $('menu-selector').toggleClass('fa-rotate-180');    
});

---

这只是一个样本。你可以解决这个问题。

Font Awesome v5已经改变了很多事情

这是我用来获得一个正负折叠按钮的代码，用于引导、JQuery和Fontsome

HTML:

---

你应该能够用加号/减号代替上下的雪佛龙。

当点击此代码中的

a

标记时，我如何指向

i

标记。你可以使用$（this）引用i。查找（'i:first'）或$（this）。children（）；我喜欢你的解决方案。我用你的解决方案解决了我的其他主要问题。还有一个问题。如果您仔细观察，如果您单击图标本身，它的行为会有所不同，当您单击菜单名时，它的行为会有所不同。你能告诉我为什么吗。请换一个座位。我没有更新代码！非常感谢你。你编辑的JSFIDLE不仅解决了我的问题，还解决了所有其他问题。现在，我的菜单在第二次单击时不会显示两次，而是立即关闭。谢谢。还有一个问题。如果您仔细观察，如果您单击图标本身，它的行为会有所不同，当您单击菜单名时，它的行为会有所不同。为什么？我刚刚更新了JSFIDLE，看看它。如果没有任何其他类，只需执行

$（'.fa'）.attr（'class'，'fa-fa-chevron-up'）
<a class="btn btn-collapse" id="btn-collapse" data-toggle="collapse" data-target="#collapse-section"><i class="fas fa-minus"></i></a>

$("#btn-collapse").click(function() {
    if ($(this).hasClass('collapsed')) {
        $(this).find('svg').attr('data-icon', 'minus');
    } else {
        $(this).find('svg').attr('data-icon', 'plus');
    }
});