使用jQuery实时更改fontawesome图标

Question

我已经创建了一个带有子菜单的导航菜单navigational menu。我想要当用户点击该菜单项时，带有fa-chevron-down（向下箭头图标）的菜单项更改为fa-chevron-up（向上箭头图标），并在用户单击其他任何地方时更改回来。此外还有两个请求，

1) 由于我对jquery非常陌生，我编写的jquery代码似乎可以完成任务，但是否有更好的方法？（请注意，当单击一个菜单项两次时，滑动会发生两次。这很烦人）。

2) 当用户调整窗口大小时，HTML元素不会保持在原位，并且会散开。

先行致谢。

JSFIDDLE演示

更新:感谢解决我的问题。 我进一步完善了我的问题，现在它完美地运作。 这是最终版本JSFIDDLE

- Arin Chakraborty

---

我修改了jsfiddle，但是没有更新代码！ - Armen

Answer 1

要更改图标，您可以在单击事件中轻松执行以下操作：

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

更多内容请查看jsfiddle示例：

jsfiddle示例

- Armen

---

非常感谢。您编辑的 jsfiddle 不仅解决了我的 fontawesome 问题，还解决了其他所有问题。现在，当我第二次单击时，我的菜单不会再显示两次，而是立即关闭。非常感谢。http://jsfiddle.net/pjQP7/9/ - Arin Chakraborty

只有一个问题。如果您仔细观察，如果单击图标本身，它会表现得不同，而当您单击菜单名称时，它的行为也会不同。为什么？ - Arin Chakraborty

我刚刚更新了 jsfiddle，请看一下。 - Armen

如果您没有其他类，可以简单地执行 $('.fa').attr('class','fa fa-chevron-up');。 - Pere

Answer 2

我认为没有必要改变这个类。

如果你只想将 fa-chevron-down 图标更改为 fa-chevron-up，而不是切换类，请使用 fa-rotate-180 的toggleClass。 fa-rotate-180 会旋转您的图标，并且它可能可以解决您的问题。不需要添加/删除单独的类。

比如说：

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

这只是一个示例。你可以围绕它进行工作。

- K K

---

在这段代码 <a href="#"><i class="fa fa-chevron-up"></i></a> 中，当点击 a 标签时，如何指向 i 标签？ - Arin Chakraborty

你可以使用$(this).find('i:first')或$(this).children()来引用i。 - K K

我喜欢你的解决方案。http://jsfiddle.net/pjQP7/9/ 用你的解决方案，我解决了其他重要问题。 - Arin Chakraborty

只有一个问题。如果你仔细观察，你会发现当你点击图标本身时，它的行为不同于当你点击菜单名称时的行为。你能告诉我为什么吗？ - Arin Chakraborty

Answer 3

Font Awesome v5对事物进行了相当大的改变。

这是我用Bootstrap、JQuery和FontAwesome制作加减折叠按钮的代码。

HTML：

<a class="btn btn-collapse" id="btn-collapse" data-toggle="collapse" data-target="#collapse-section"><i class="fas fa-minus"></i></a>

JQuery脚本：

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

你应该能够用加号和减号替换上下箭头。

- Dagmar