第二次点击后旋转回div答案

【问题标题】：Rotate back div after the second click on it第二次点击后旋转回div
【发布时间】：2014-07-10 22:16:53
【问题描述】：

我使用 CSS 和 Javascript 来在单击 div 后旋转它（从 0° 到 45°）。它运作良好。我希望 div 在第二次单击后旋转回来（从 45 度到 0 度），但是 div 上没有任何反应......我没有找到更多主题来解决这个问题。如果您有任何想法，那就太好了！谢谢。

风格

.home {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}


.home.active {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

脚本

$(document).ready(function(){
    $('.home').click(function(){
        $('.home').removeClass('active');
        $(this).addClass('active');
    });
});

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

尝试使用toggleClass

$(document).ready(function(){
    $('.home').click(function(){
        $(this).toggleClass('active');
    });
});

【讨论】：

非常感谢 Dan，效果很好 :) 祝你有美好的一天。

【解决方案2】：

CSS3 可以完成转换，更多信息请参见Firefox MDN Link

HTML

<div class="description-wrapper">
    <div class="category-desc-toggle rotate redbg"></div>
    <div class="category-desc">REEED!</div>
</div>

<div class="description-wrapper">
    <div class="category-desc-toggle bluebg rotate"></div>
    <div class="category-desc">Blue</div>
</div>

<div class="description-wrapper">
    <div class="category-desc-toggle yellowbg rotate"></div>
    <div class="category-desc">Yellow Box</div>
</div>

Javascript

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

CSS

.description-wrapper {
    width: 80px;
    text-align: center;
    margin-bottom: 20px;
}

.redbg {
    background-color: red;
}

.bluebg {
    background-color: blue;
}

.yellowbg {
    background-color: yellow;
}

.rotate { 
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    transform: rotate(0deg);
}

.rotate45 { 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.category-desc-toggle { 
    width: 80px;
    height: 75px; 

    -moz-transition: all .3s; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
}

Working Demo

【讨论】：