Конвертер изображения 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