부트 스트랩 3 : 위 또는 아래를 가리키는 Accordion Chevron 아이콘

Question

영어로 죄송합니다. 먼저 스크립트에서 무엇이 잘못 되었습니까? 셰브론은 바뀌지 않습니다. 저는 웹 마스터가 아닙니다. 나는 초보자이다. 고마워.

이 내 템플릿입니다 :

   <div class="panel-heading"> 
        <div class="panel-title">Tableau de bord 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></a> 
        </div> 
       </div> 
        <div id="collapseOne" class="panel-collapse collapse in"> 
         <ul class="list-group"> 
          <li class="list-group-item"><i class="fa fa-user"></i><a href="#">Information</a></li> 
          <li class="list-group-item"><i class="fa fa-power-off"></i><a href="#">Log out</a></li> 
         </ul><!--/.list-group--> 
        </div><!--/collapseOne--> 

       <div class="panel-footer"> 
        <div class="panel-title">Archives 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></a> 
        </div> 
       </div> 
        <div id="collapseTwo" class="panel-collapse collapse in"> 
         <ul class="list-group" style="margin-bottom:0"> 
          <li class="list-group-item"><i class="fa fa-arrow-right"></i><a href="#">2015</a></li> 
          <li class="list-group-item"><i class="fa fa-arrow-right"></i><a href="#">2014</a></li> 
         </ul><!--/.list-group--> 
        </div><!--/collapseTwo-->    
      </div><!--/.panel-blue--> 
     </div><!--/.panel-group accordion--> 

이 스크립트입니다 :

<script> 
$('.clickable').on('click', function (e) { 
    var $this = $(this); 
    if (!$this.hasClass('panel-collapsed')) { 
    $this.parents('.panel').find('.panel-title').slideUp(); 
    $this.addClass('panel-collapse'); 
    $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); 
    } else { 
    $this.parents('.panel').find('.panel').slideDown(); 
    $this.removeClass('.panel-title'); 
    $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); 
    } 
}) 
</script> 

Answer 1

내가 같은 않는 toggleClass에 의해 두 줄 addClass/removeClass를 교체, 작동하는 것으로 보입니다. http://jsfiddle.net/FLZpk/1/

$('.clickable').on('click', function (e) { 
    var $this = $(this); 
    if (!$this.hasClass('panel-collapsed')) { 
    $this.parents('.panel').find('.panel-title').slideUp(); 
    $this.addClass('panel-collapse'); 
    } else { 
    $this.parents('.panel').find('.panel').slideDown(); 
    $this.removeClass('.panel-title'); 
    } 
    $this.find('i').toggleClass('glyphicon-chevron-up glyphicon-chevron-down'); 
}) 

jQuery toggleClass doc : https://api.jquery.com/toggleClass/