javascript - jQuery Slidetoggle 旋转 45 度并返回

Question

我试图使元素在单击操作时旋转 45°，切换元素应该打开。 如果您再次单击它，我希望它旋转回来并且切换元素应该关闭。

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

Plugin I am using

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

确实，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>