gpt4 book ai didi

javascript - jQuery Slidetoggle 旋转 45 度并返回

转载 作者:行者123 更新时间:2023-11-28 09:18:27 25 4
gpt4 key购买 nike

我试图使元素在单击操作时旋转 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;
}

我做错了什么?有没有更简单的方法(更少的代码)?

最佳答案

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

关于javascript - jQuery Slidetoggle 旋转 45 度并返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15323887/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com