jQuery在Clic上旋转跨度

Question

我正在网站上工作（仍需要工作），在移动导航上，我有一个扩展子菜单，该子菜单的跨度带有字体字符。 我想要的是使该角色在单击第一个tima时可以旋转180度，而在再次单击时可以回到零，到目前为止，我只能在第一次单击它时使其批准。

<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>

这是我一直在尝试使用的jQuery：

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

这是该网站的地址： http : //66.68.113.215/design-3

js文件是/js/menu.js，css是/css/menu.css

Answer 1

尝试这样的事情（请参见此处的效果： 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检查.css()方法的语法，似乎正确。 好吧，这或者您可以使用一个外部库，例如： http : //jqueryrotate.com/ 。

Answer 2

因此，我决定听jsfiddle.net/0oo0fyra/1 – timo，他问为什么不使用普通的javascript，所以我进行了更多研究并提出了此解决方案

对于html，我使用了一些内联js在单独的js文件中触发函数“ flip”，因为该标签已经被CSS样式化为块，所以我决定使用它来激活oncl​​ick函数，并发送跨度id作为函数的参数

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

在js文件“ menu.js”中，我定义了一个与该函数一起使用的变量，在“ flip”函数中，我将该函数外部的变量“ voltear to 1”的起始值定义为该函数的全局变量。不会在每次onclick函数触发时重新分配，然后该函数接收跨度的ID并使用它来确定跨度，然后我就写了我希望跨度执行的操作

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;
    }
}