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()到点击事件，这样的散列不会装入HREF。

See example →

Answer 2

使用toggleClass代替

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

工作jsFiddle