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のrotateおよびtransitionプロパティを使用して実現できます。

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が変換を実行できることは正しいです。詳細については、FirefoxMDNリンクを参照してください。

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 に答える