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

Question

So I'm in need of a bit of help. I have an issue that requires javascript/css combination.

jsfiddle

I have the menu setup. As you can see, the arrows animate on hover, which is not what I want in this case.

I want the arrows/css to animate on click. So I'm not sure on how to do this, if I should use .hasClass in js and switch it on click. Also, how would I be able to define which menu item is opened (defined by class, instead of defined in js).

After clicking, I want the arrow to remain how it should after animating (ie open menu has arrow up, closed menu has arrow down).

Would I have to change the js alot or would it just be minimal edits.

$(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");
    });
});

Any help would be great.

Answer 1

Here is the solution to the second part of your question: http://jsfiddle.net/R7f2K/3/

Your HTML has been updated to change:

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

to

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

I have added this line to your JS code:

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

The CSS rules have been modified to use #VerColMenu li a [class^="vnavright"] .

While things are working as you had desired, I find the animation to be confusing.

Answer 2

In the original HTML, you'll also probably want to change that first arrow's class to fa-angle-up :

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