如何切換兩級的一個元素

Question

我想切換.fa，脫字權.fa，脫字下什麼是最好的解決方案

<ul id="brief-histories"> 
    <li class="brief-summary-row emo"> 
      <a href="#" class="history-head"> 
       <div class="row"> 
        <div class="col-sm-11">2014-02-28 14:51:08</div> 
        <div class="col-sm-1 fa fa-caret-right" history-icon="hide"></div> 
       </div> 
      </a> 

      <div class="content-hide" style="display:none;"> 
         28-02-2014 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 

      </div> 

    </li>   
     <li class="brief-summary-row emo"> 
      <a href="#" class="history-head"> 
       <div class="row"> 
        <div class="col-sm-11">2014-02-27 16:18:40</div> 
        <div class="col-sm-1 fa fa-caret-right" history-icon="hide"></div> 
       </div> 
      </a> 

      <div class="content-hide" style="display:none;"> 
        27-02-2014 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        27-02-2014 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </div> 

    </li>   
</ul> 

jQuery的

$('#brief-histories .history-head').click(function(e){ 
       e.preventDefault(); 
       $(this).closest('.emo').find('.content-hide').not(':animated').slideToggle(function(){ 
        $(this).closest('.emo').find('.history-head .fa-caret-right').toggleClass('fa-caret-right'); 
       }); 
     }); 

Demo

Answer 1

.toggleClass（）可以採用2類名和它切換

$('#brief-histories .history-head').click(function(e){ 
    e.preventDefault(); 
    $(this).closest('.emo').find('.content-hide').not(':animated').slideToggle(function(){ 
     $(this).closest('.emo').find('.history-head .fa').toggleClass('fa-caret-right fa-caret-down'); 
    });    
}); 

演示：Fiddle