JQuery rotate a span on clic

Question

I'm working on my website (still need work), on the mobile nav, I have an expanding submenu, which has a span with a font character. What I want is for this character to rotate 180 degrees when clicked the first tima and go back to zero when clicked again, so far I've only been able to make it ratate the first time I click on it.

<ul>
        <li class="parent"><a href="#"><span class="icon-house"></span>Home</a></li>
        <li class="parent"><a href="#"><span class="icon-network"></span>Networks</a></li>
        <li class="parent"><a href="#"><span class="icon-users"></span>Artists</a></li>
        <li class="parent"><a href="#"><span class="icon-pictures"></span>Visual Art</a></li>
        <li class="submenu parent genres">
            <a href="#"><span class="icon-music"></span>Genres<span class="icon-arrow-down6 caret flechitauno"></span></a>
            <ul class="children">
                <li><a href="#">House <span class="icon-music3"></span></a></li>
                <li><a href="#">Trance <span class="icon-music3"></span></a></li>
                <li><a href="#">Drum & Bass <span class="icon-music3"></span></a></li>
            </ul>
        </li>
        <li class="parent"><a href="#"><span class="icon-info"></span>About this site</a></li>      
</ul>

this is the jquery that I've been trying to use:

$(document).ready(main);
var flechitauno = 1;

//flip
$('.genres').click(function(){
    if(flechitauno == 1){
        $('.flechitauno').css({
            transform: 'rotate(180deg)'
        });
        flechitauno = 0;
    }else{
        flechitauno = 1;
        $('flechitauno').css({
            transform: 'ratate(0deg)'
        });
    }
    });
}

This is the adress of the website: http://66.68.113.215/design-3

the js file is /js/menu.js, and the css is /css/menu.css

Answer 1

Try something like this (see effect working here: https://jsfiddle.net/p1xfuc1t/ ):

HTML:

<li class="submenu parent genres">
            <a href="#"><span class="icon-music"></span>Genres<span class="icon-arrow-down6 caret flechitauno"></span></a>
            <ul class="children">
                <li><a href="#">House <span class="icon-music3"></span></a>      </li>
                <li><a href="#">Trance <span class="icon-music3"></span></a></li>
                <li><a href="#">Drum & Bass <span class="icon-music3"></span></a></li>
            </ul>

CSS:

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

JS

$(document).ready(function() {

  $('.genres').on('click', function() {
    $('.flechitauno').css(
      "animation", "roll 3s"
    )
  });
});

Aslo check your syntax for the .css() method, it dosent seem right. Well either this or you use an external library like: http://jqueryrotate.com/ .

Answer 2

So, I decided to listen to jsfiddle.net/0oo0fyra/1 – timo, who asked why not use plain javascript, so I researched a little bit more and came up with this solution

For the html, I used some in-line js to trigger the function 'flip' in a separate js file, since this a tag was already styled as block with css, I decided to use it to activate the onclick function, sending the span id as an argument to the function

<a href="#" onclick="flip('genres')"><span class="icon-music"></span>Genres<span class="icon-arrow-down6 caret" id="genres"></span></a>

In the js file 'menu.js' I defined a variable to work with the function, and the 'flip' function, I defined the starting value of the variable 'voltear to 1' outside of the function as a global one to that it won't be reassigned every time the onclick function triggers, then the function receives the id of the span and uses it to target the span, then I just wrote what I wanted my span to do

var voltear = 1
function flip(id){
if (voltear == 1) {
    document.getElementById(id).style.transform = "rotate(180deg)";
    voltear = 0;
}else{
        document.getElementById(id).style.transform = "rotate(0deg)";
        voltear = 1;
    }
}