Jqueryアコーディオン機能、親クラスを変更する

Question

私はうまく動作しているブートストラップアコーディオンテーブルを持っています。グリフコンは、現在どのタブローがchildren-rowを展開しているかを示します。しかし、関数を持つ何かが間違っているように見えますが、期待どおりに祖先要素のクラスを変更しません。

$('.accordion-text').on('shown.bs.collapse', function() { 
$(this).closest(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down"); 
}); 

$('.accordion-text').on('hidden.bs.collapse', function() { 
$(this).closest(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); 
}); 

完全なコードは：http://jsfiddle.net/7pwg1j5f/616/

<tbody> 
     <tr id="package1" class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails1"> 
      <td>123456</td> 
      <td>3</td> 
      <td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i> 

      </td> 
     </tr> 
     <tr> 
      <td colspan="3" class="hiddenRow"> 
       <div class="accordion-text accordion-body collapse packageDetails1" id=""> 
        <table> 
         <tr> 
          <td>Revealed item 1</td> 
         </tr> 
         <tr> 
          <td>Revealed item 2</td> 
         </tr> 
        </table> 
       </div> 
      </td> 
     </tr> 

Answer 1

はあなた.indicator要素を見つけた方法が適切ではなかったです。それは前のtrの.accordion要素の親のtrにあります。構造に従うだけで、適切な要素が得られます。また、両方のイベントを組み合わせて、addClassとremoveClassの代わりにtoggleClassを使用することもできます。以下は更新されたソリューションです。

$('.accordion1').on('shown.bs.collapse hidden.bs.collapse', function() { 
    $(this).closest('tr').prev(".accordion-toggle").find('.indicator').toggleClass("glyphicon-chevron-up glyphicon-chevron-down"); 
}); 

.closest('tr')は - .accordion1divの親を取得します。

.prev('.accordion-toggle') - 先に取得した の前の兄弟をフェッチします。parent。

.find('.indicator') - .indicator要素を見つける。

.toggleClass - それぞれのクラスを[追加/削除]します。

Here is the Updated DEMO

はまた、私は問題は以前からご両親セレクタは決してピックアップ細胞ということであるクラスを一致させるために、HTMLでいくつかの変更

Answer 2

を作ったことに注意してください行を選択して前のページに切り替え、その行の関連要素を見つけます。

$('.accordion1').on('show.bs.collapse', function() { 
    $(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down"); 
}); 
$('.accordion1').on('hide.bs.collapse', function() { 
    $(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); 
});