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

Question

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

jsfiddle

我有菜单设置。如您所见，箭头在悬停时会显示动画，这不是我在这种情况下想要的。

我希望箭头/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");
    });
});

任何帮助都会很棒。

Answer 1

这是问题第二部分的解决方案:http://jsfiddle.net/R7f2K/3/

您的 HTML 已更新更改:

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

到

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

我已将这一行添加到您的 JS 代码中:

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

CSS 规则已修改为使用 #VerColMenu li a [class^="vnavright"]。

虽然一切如您所愿，但我发现动画令人困惑。