3 레벨 아코디언 - Uncollapse 3 레벨 1 레벨을 클릭하여

Question

3 레벨 아코디언을 만들었습니다. 거의 제대로 작동합니다 ... 그러나 3 단계가 접히고 1 단계를 비틀림 (?)하려고하면 2 단계 항목이 보이지 않고 3 단계 항목이 계속 표시됩니다.

여기 코드 :

누군가가 아이디어가있는 경우

JSFiddle Example

<table class="table table-condensed" style="border-collapse:collapse;"> 
<thead> 
    <tr> 
     <th>#</th> 
     <th>Date</th> 
     <th>Description</th> 
     <th>Credit</th> 
     <th>Debit</th> 
     <th>Balance</th> 
    </tr> 
</thead> 
<tbody> 
    <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle"> 
     <td>1</td> 
     <td>05 May 2013</td> 
     <td>Credit Account</td> 
     <td class="text-success">$150.00</td> 
     <td class="text-error"></td> 
     <td class="text-success">$150.00</td> 
    </tr> 
    <tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle"> 
     <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td> 
    </tr> 
    <tr> 
     <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 </div> </td> 
    </tr> 
    <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle"> 
     <td>2</td> 
     <td>05 May 2013</td> 
     <td>Credit Account</td> 
     <td class="text-success">$11.00</td> 
     <td class="text-error"></td> 
     <td class="text-success">$161.00</td> 
    </tr> 
    <tr data-toggle="collapse" data-target="#demo21" class="accordion-toggle"> 
     <td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td> 
    </tr> 
    <tr> 
     <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo21"> Demo21 </div> </td> 
    </tr> 

</tbody> 

좋을 것이다.

은 실 거예요 :)

데이터를 대상 유는 데모 1 아이디하지만 두 번째 옵션을 선택합니다 대상을 클릭하면 이렇게 지적한다 = "#의 데모 1은"사업부의 외부

Answer 1

그것 때문에 너무 감사 div를 닫아서 구조체를 변경해야합니다. demo1 id 내에서 3 단계 이동해야합니다.

<tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle"> 
      <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td> 
     </tr> 
     <tr> 
      <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 </div> </td> 
     </tr> 

변화에 refrence https://plnkr.co/edit/S39oZfRWuWf4YiKFRCRE?p=preview에 대한

<tr data-toggle="collapse" data-target="#demo11" class="accordion-toggle"> 
      <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 
       <div> 
       <div colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo11"> Demo11 tytjtyty</div>   </div> 
      </div> 
      </div> </td> 
     </tr> 

에