maftyycs maftyycs - 6 months ago 20
HTML Question

Arrow rotates when menu toggles

How can I have the arrows rotate onclick and rotate back when I slide open another menu or click on the arrow again?

JSFIDDLE

JS:

//Dropdown Menu
$("a.slide-dropdown").click(function slideMenu()
{
$(this).next('ul').slideToggle();
$(this).parent().siblings().children().next('ul').slideUp();

});

//Arrows
$( ".crossRotate" ).click(function() {
//alert($( this ).css( "transform" ));
if ($(this).css( "transform" ) == 'none' )
{
$(this).css( "transform" , "rotate(-180deg)" );
}
else
{
$(this).css("transform","" ) ;
}
});

Answer

You need to update your crossRotate click event.

Try this

//Arrows
$( ".crossRotate" ).click(function() {
    //alert($( this ).css( "transform" ));
    $(".crossRotate").css("transform","none" ) ;
    if ($(this).css( "transform" ) == 'none' )
    {
        $(this).css( "transform" , "rotate(-180deg)" );
    } 
    else 
    {
       $(this).css("transform","none" ) ;
    }
});