Faire pivoter l'image de 180 degrés sur cliquez avec jquery avec animation

Je suis en train de faire un menu déroulant de navigation et je voudrais utiliser une flèche qui tourne pour l'activer.

J'ai cette https://jsfiddle.net/jaUJm/39/

$(document).ready(function() {
$( ".toggle" ).click( function() {
    $("#image").css({'transform': 'rotate(-180deg)'});
});
});

Je ne suis pas sûr de savoir comment faire reset, comme, de compléter la rotation de sorte qu'il est pointé vers le bas à nouveau lorsqu'il est cliqué sur les fois suivantes.

Peut-être un .flip classe avec

.flip { transform: rotate(-180deg);}

et l'utilisation d'un if() et addClass()/removeCLass()?

Merci!

OriginalL'auteur Tyler Cardenas | 2017-01-01

  1. 4

    Peut changer

    $("#image").css({'transform': 'rotate(-180deg)'});

    à

    $("#image").toggleClass('flip');

    OriginalL'auteur Joey Zhang