ブートストラップ3 - 折りたたみネストしたテーブル行を展開する

Question

私はブートストラップ3を使用するWebページを持っています。このページでは、私は祖父母、親、および子供の関係を表示しようとしています。これを行うには、展開/折りたたむことができる表の行があります。私はBootply hereをセットアップしました。私のHTMLは次のようになります。

祖父母や親のどちらかが展開され

<div id="grandparent" class="list-group-item"> 
    <div data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent"> 
     <ul class="list-inline"> 
      <li id="grandparentIcon">&gt;</li> 
      <li>Grandparent</li> 
     </ul> 
    </div> 

    <div class="collapse" id="grandparentContent" aria-expanded="true"> 
     <table class="table"> 
     <thead> 
      <tr> 
      <th></th> 
      <th>Name</th> 
      <th>Created On</th> 
      <th>Last Modified</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr data-toggle="collapse"> 
      <td><div>&gt;</div></td> 
      <td>Parent 1</td> 
      <td>04/02/2017</td> 
      <td>04/04/2017</td> 
      </tr> 

      <tr class="collapse"> 
      <td></td> 
      <td>Child A</td> 
      <td>04/01/2017</td> 
      <td>04/05/2017</td> 
      </tr> 

      <tr class="collapse"> 
      <td></td> 
      <td>Child B</td> 
      <td>04/03/2017</td> 
      <td>04/04/2017</td> 
      </tr>   

      <tr data-toggle="collapse"> 
      <td><div>&gt;</div></td> 
      <td>Parent 2</td> 
      <td>04/03/2017</td> 
      <td>04/10/2017</td> 
      </tr> 

      <tr class="collapse"> 
      <td></td> 
      <td>Child X</td> 
      <td>04/10/2017</td> 
      <td>04/11/2017</td> 
      </tr>   
     </tbody> 
     </table> 
    </div> 
</div> 

、私は「V」に「>」から関連するアイコンを変更しようとしています。ただし、これは機能しません。なぜか分からない。どんな助けもありがとうございます。

Answer 1

：

1. 祖父母または親がクリックされるたびに切り替わり、展開または折りたたまれているかどうかを表すクラスです。
2. collapsedクラスがアクティブな場合は「>」を表示し、アクティブでない場合（展開されている場合）は「v」を表示するようにCSSを追加します。

Updated Bootply Here

あなたの主な問題は、あなたがあなたの親行のdata-targetを欠落していた、そしてあなたも、あなたのjQueryを使って祖父母のアイコンを変更したということです。

キーjQueryの

$('[data-toggle="collapse"]').on('click', function() { 
    $(this).toggleClass('collapsed'); 
}); 

キーCSS

.collapsed .icon-class:before { 
    content: '>'; 
} 
.icon-class:before { 
    content: 'v'; 
} 

Answer 2

固定されたバージョンでは、自分の好きなようにコードを変更してください。

http://www.bootply.com/sCCEzKCLsI#

しかし、本質的に show.bs.collapseとhide.bs.collapseイベントは.collapseなくdata-toggle="collapse"要素から発射されています。

Answer 3

WilomGfx's answerに加えて、data-targetをテーブル行に割り当てる必要があります。あなたは二つのことを追加してやろうとしているものを行うことができます

プレビューhere

HTML

<div id="grandparent" class="list-group-item"> 
    <div id="expander" data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent"> 
     <ul class="list-inline"> 
      <li id="grandparentIcon">&gt;</li> 
      <li>Grandparent</li> 
     </ul> 
    </div> 

    <div class="collapse" id="grandparentContent" aria-expanded="true"> 
     <table class="table"> 
     <thead> 
      <tr> 
      <th></th> 
      <th>Name</th> 
      <th>Created On</th> 
      <th>Last Modified</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr data-toggle="collapse" data-target="#childOne"> 
      <td><div>&gt;</div></td> 
      <td>Parent 1</td> 
      <td>04/02/2017</td> 
      <td>04/04/2017</td> 
      </tr> 

      <tr class="collapse" id="childOne"> 
      <td></td> 
      <td>Child A</td> 
      <td>04/01/2017</td> 
      <td>04/05/2017</td> 
      </tr> 

      <tr class="collapse"> 
      <td></td> 
      <td>Child B</td> 
      <td>04/03/2017</td> 
      <td>04/04/2017</td> 
      </tr>   

      <tr data-toggle="collapse" data-target="#childTwo"> 
      <td><div>&gt;</div></td> 
      <td>Parent 2</td> 
      <td>04/03/2017</td> 
      <td>04/10/2017</td> 
      </tr> 

      <tr class="collapse" id="childTwo"> 
      <td></td> 
      <td>Child X</td> 
      <td>04/10/2017</td> 
      <td>04/11/2017</td> 
      </tr>   
     </tbody> 
     </table> 
    </div> 
</div> 

スクリプト

$('.collapse').on('show.bs.collapse', function() { 
    var groupId = $('#expander').attr('data-group-id'); 
    console.log(groupId); 
    if (groupId) { 
    $('#grandparentIcon').html('v'); 
    } 
}); 

$('.collapse').on('hide.bs.collapse', function() { 
    var groupId = $('#expander').attr('data-group-id'); 
    console.log(groupId); 
    if (groupId) { 
    $('#' + groupId + 'Icon').html('>'); 
    } 
});