1

我试图让元素在点击动作时旋转 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;
}

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

4

2 回答 2

0

在不知道您的要求的情况下，很难给您一个完整的答案。不过，这可以通过 css3 的旋转和过渡属性来完成。

transform: rotate(45deg);

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

编辑：如果有人试图在没有 CSS 的情况下完成此操作，则有一个支持大多数主要浏览器的 jquery 插件。要对 IE 产生这种影响，您需要使用矩阵过滤器。

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

于 2013-03-10T15:40:00.717 回答
0

事实上，JuanT 是正确的，CSS3 可以完成转换，有关更多信息，请参阅Firefox MDN 链接。

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>
于 2013-03-10T15:56:17.163 回答