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的块，我决定使用它来激活onclick功能，将span 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的起始值定义为1'作为全局函数每次onclick函数触发时都不会重新分配，然后函数接收span的id并使用它来定位span，然后我就写了我想要的跨度来做

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

JQuery在clic上旋转一个span

2 个答案: