Question

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

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

我希望arrow / 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"]。

虽然事情按照您的意愿运作，但我发现动画令人困惑。

Answer 2

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

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

单击javascript更改类，保持css动画

2 个答案: