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