javascript - onclick 的旋转代码不起作用？

Question

我有一张箭头的图片，它指向右边，这就是图像的来源。然而，图片应该是朝下的，我做对了。我想要做的是在用户单击图像时让箭头指向上方(特别是逆时针旋转 180 度)。

<img class="moreIndicator rot90" src="img/more.png" alt="More Content"/>

这个元素有两个类。 “moreIndicator”和“rot90”是两个独立的类。这就是我为他们准备的东西。

.moreIndicator {
    display: block;
    height: 50px;
    width: 50px;
    position: relative;
     margin-left: auto;
    margin-right: auto;
    z-index: 3;
    opacity: .8;
    top: 0px;


}

上面的代码只是为了让它在页面上居中。

这是旋转90度的代码:

.rot90 {@-moz-keyframes spin { 100% { -moz-transform: rotate(90deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(90deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }
-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

上面的代码可以正确地将图片旋转 90 度并指向下方。这是 .rot180 代码:

.rot180 {@-moz-keyframes spin { 100% { -moz-transform: rotate(180deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(180deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } }
-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

我尝试编写各种 Javascript 代码，使其在您单击图像时旋转，使箭头从指向下方的位置开始指向上方。我该怎么办？

Answer 1

类似的东西？

$('.arrow').click(function() {
  $(this).toggleClass('active')
})

.arrow {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #999;
  transition: transform .5s;
  cursor: pointer;
}

.arrow.active {
  transform: rotate(90deg)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow"></div>
<div class="arrow active"></div>