Jquery Imageトランスフォームが期待通りに機能していませんか？

Question

jQueryで変換イメージ（矢印の上下）を使用しようとしています。

もう一度クリックすると逆さになりますが、戻ってきません。

HTML

<div class="question">   
     <h3>Headline</h3> 
     <p>Paragraph</p> 
    <span></span> 
     </div> 

JS

$('.question').click(function() { 
     $(this).find('span').css("transform", "rotateX(180deg)"); 
    }); 

JSfiddle

Answer 1

それを動作させるつもりはないので、あなたが何度もプロパティを追加しています。代わりに、プロパティが存在するかどうかを確認してプロパティを追加または削除できます。例えば

：

$('.question').click(function() { 
    var arrow = $(this).find('span'); 

    if (arrow.css("transform") == "none") { 
    arrow.css("transform", "rotateX(180deg)"); 
    } else { 
    arrow.css("transform", "none"); 
    } 

}); 

Here's a fiddle