jquery - 使用 jQuery 旋转切换图像

Question

相关网站:http://mtthwbsh.com

我正在尝试创建一个可折叠的导航，在切换时，箭头指向上方(隐藏时指向下方)。

我一直在阅读有关使用 jQuery 旋转图像的内容，并发现这是我最好的资源:Rotate Image(s) OnClick With jQuery?

我明白这里发生了什么，但我很难用我的标记来可视化它。我的折叠导航的 jQuery 如下:

<script type="text/javascript">
$(document).ready(function(){
/* toggle nav */
$("#menu-icon").on("click", function(){
    $(".nav").slideToggle();
    $(this).toggleClass("active");
  });
 });
</script>

我想知道是否有人可以帮助解释我如何将此类功能转换为我的插件？

Answer 1

检查一下，也许可以帮助别人 http://jsfiddle.net/gkmagvo3/515/

<a class="arrow" href="#">        
    <img class="arrow-img rotate-reset" src="img.png" />        
</a>

一些CSS:

.rotate {
    transform: rotate(-180deg);
    /*transform: rotate(180deg);*/
    transition: .3s;
}
.rotate-reset {
    transform: rotate(0deg);
    transition: .3s;
}

和 JavaScript:

$('.arrow').on("click", function (event) {
    $('.arrow-img').toggleClass('rotate');
    $('.arrow-img').toggleClass('rotate-reset');
});