Question

我试图让元素在点击动作时旋转45º，切换元素应该打开。如果你再次点击它我希望它向后旋转，切换元素应该关闭。

我尝试了很多代码，我希望尽可能简单。

jQuery的：

$(".category-desc-toggle").click(function () {
    $('.category-desc').slideToggle(300);
    $(".category-desc-toggle").toggleClass("rotate45");
});

的CSS：

.rotate45 { 
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg);
}
.category-desc-toggle { 
    -moz-transition: all .3s; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s;
}

我做错了什么？有更简单的方法（更少的代码）？

Answer 1

如果不了解您的要求，很难给您一个完整的答案。但是，这可以通过css3的旋转和过渡属性来实现。

transform: rotate(45deg);

我创建了一个jsfiddle来证明这一点。 http://jsfiddle.net/hGZbW/

编辑：如果有人试图在没有CSS的情况下完成此任务，那么有一个支持大多数主流浏览器的jquery插件。要为IE实现此效果，您需要使用矩阵过滤器。

https://github.com/heygrady/transform/wiki

Answer 2

确实JuanT是正确的，CSS3可以完成转换，有关详细信息，请参阅Firefox MDN Link。

jsFiddle：http://jsfiddle.net/7K6GP/4/

<div class="description-wrapper">
    <div class="category-desc-toggle rotate"></div>
    <div class="category-desc">Just Some Description</div>
</div>

<script>
    $(".description-wrapper").click(function() {
        $(this).children('div.category-desc').slideToggle(300);
        $(this).children('div.category-desc-toggle').toggleClass("rotate45");
    });
</script>

jQuery Slidetoggle旋转45度并返回

2 个答案: