Question

我使用CSS和Javascript来点击它后旋转div（从0deg到45deg）。它运作良好。我希望div在第二次单击后旋转回来（从45deg到0deg），但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');
    });
});

Answer 1

尝试使用toggleClass

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

Answer 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; 
}

第二次单击后旋转后退div

2 个答案:

Working Demo