javascript在单击时更改类，保留css动画

所以我需要一些帮助。我有一个需要javascript/css组合的问题

我有菜单设置。正如你所看到的，箭头在悬停状态下动画，这不是我在本例中想要的

我希望箭头/css在单击时设置动画。所以我不确定如何做到这一点，如果我应该在js中使用.hasClass并在单击时切换它。另外，我如何定义打开哪个菜单项（由类定义，而不是在js中定义）

单击后，我希望箭头在设置动画后保持不变（即“打开”菜单的箭头向上，而“关闭”菜单的箭头向下）

我是否需要对js进行大量更改，或者只是进行少量编辑

$(document).ready(function() {
    // Collapse everything but the first menu:
    $("#VerColMenu > li > a").not(":first").find("+ ul").slideUp(1);
    // Expand or collapse:
    $("#VerColMenu > li > a").click(function() {
        $(this).find("+ ul").slideToggle("fast");
    });
});

---

任何帮助都很好。

以下是问题第二部分的解决方案：

您的HTML已更新以更改：

<i class="fa fa-angle-down vnavright"></i>

CSS规则已修改为使用

#VerColMenu li a[class^=“vnavright”]

---

当事情按照您所希望的方式运行时，我发现动画令人困惑。

在原始HTML中，您可能还希望将第一个箭头的类更改为fa angle up：

    <ul id="VerColMenu">
        <li><a class="top-vnav">General <i class="fa fa-angle-up vnavright"></i></a>
...

一般的
...

请开始使用JSFIDLE上的“整理”按钮。它使您的代码变得漂亮。已修复，抱歉。我会记住未来的小提琴，没关系。顺便说一句，我已经为您提供了代码，使箭头在设置动画后保持不变。是否还要保留当前的悬停动画？谢谢。还有可能在其中包含css动画吗？或者这是更难实现的事情吗？完全可能。我们只需要使用一个不同的选择器，比如用css动画为angle up和angle down创建一个单独的类，请参见更新的答案。你应该点击答案旁边的复选标记来接受。我已经接受了，谢谢你的帮助。这一切似乎都是我希望它是除了动画。是否可以触发动画onClick（即仅当您单击菜单项时）？谢谢，我也这么认为。

$(this).find("[class^='vnavright']").toggleClass('fa-angle-down fa-angle-up');

    <ul id="VerColMenu">
        <li><a class="top-vnav">General <i class="fa fa-angle-up vnavright"></i></a>
...