JQuery переключаться со стрелкой проблема

Question

Я пытаюсь добавить изображение стрелки вниз при расширении и изображение стрелки вправо, когда оно не развернуто, что прекрасно работает с кодом ниже.

Проблема в том, что при повторном сворачивании блока изображение стрелки вниз не удаляется. когда он рухнул, я хотел заменить стрелку вниз изображением стрелки вправо.

спасибо

            $('#title h4').removeClass('DownArrow ');
            $('#title h4').addClass('RightArrow '); 
            $('#title').click(function() {
              $('#d-form').slideToggle("slow");
              $('#title h4').addClass('DownArrow ');            
            });


<div id="title"> <h4><a href="#">Dental</a></h4></div>
<div id="d-form">
some stuff
</div>

Answer 1

Вы должны просто использовать .toggleClass() ^{( DOCS )} :

$('#title h4').removeClass('DownArrow ');
$('#title h4').addClass('RightArrow ');
$('#title').click(function(e) {
    e.preventDefault();
    $('#d-form').slideToggle("slow");

    $('#title h4').toggleClass('RightArrow');
    $('#title h4').toggleClass('DownArrow');
});

Я также добавил preventDefault() к вашему событию click, чтобы хэш не загружался в href.

См. Пример & # x2192;

Answer 2

Вместо этого используйте toggleClass

          $('#title h4').toggleClass('DownArrow');
          $('#title h4').toggleClass('RightArrow');

Работает jsFiddle