5

有问题的网站：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>

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

4

2 回答 2

24

检查一下，也许可以帮助某人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');
});
于 2014-08-09T18:24:50.673 回答
7

它实际上只是向元素添加了一些 CSS。您可以在样式表中创建一个类：

.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

然后只需使用切换类来添加/删除它。

这不会提供任何动画。CSS3 过渡甚至可以为您做到这一点，而无需 javascript 来制作动画。看看这个，如果你想尝试的话，它有一个 JSFiddle 演示。

编辑

这是一个关于如何在两个方向上执行 CSS 过渡的演示：

http://jsfiddle.net/jwhitted/NKTcL/

于 2012-12-22T01:52:18.617 回答