Jquery圖像變換不能按預期工作？

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