javascript - 使用 jquery 即时更改 fontawesome 图标

Question

我创建了一个 navigational menu其中一些有子菜单。当用户单击该菜单时，我希望带有 fa-chevron-down(向下箭头图标)的菜单项更改为 fa-chevron-up(向上箭头图标)元素并在用户单击其他任何地方时变回。另外我还有两个要求，

1) Since i am very new to jquery, the jquery code that i wrote seems to do the trick but is there a better way? (notice when one menu item is clicked twice the sliding takes place twice. ITS ANNOYING)

2) When user resizes the window the html elements doesnot stays in place and scatters.

提前致谢。

jsfiddle demo

更新: 感谢您解决我的问题。我进一步完善了我的问题，它运行良好。这是最后的** JSFIDDLE **

Answer 1

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

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

有关更多信息，请查看 jsfiddle 示例:

jsfiddle example