부트 스트랩 접기 테이블 행

Question

일부 행만 접히는 테이블을 작성하려고합니다 (이 예에서는 첫 번째 행만).

"수신 가능성"을 클릭하면 축소 및 확장 효과가 좋았지 만 행 중 하나를 클릭 할 때 동일한 문제가 발생합니다 ... 축소 및 확대 효과를보고 싶습니다. "수신 가능성"을 클릭 할 때만

<div id="feat-exam" class="panel panel-info"> 
    <div class="panel-heading"> 
    <ul class="list-group"> 
     <li class="list-group-item" data-toggle="collapse" data-target=".RECEV"> 
     <strong>Recevability</strong> 
     <table> 
      <tr class="collapse RECEV"> 
      <td> 
       <em>item1.1</em> 
      </td> 
      <td> 
       <em>item1.2</em> 
      </td> 
      </tr> 
      <tr> 
      <td> 
       <em>item2.1</em> 
      </td> 
      <td> 
       <em>item2.2</em> 
      </td> 
      </tr> 
     </table> 
     </li> 
    </ul> 
    </div> 
</div> 

당신은 jsfiddle에 자신을 시도 할 수 있습니다 : collapsing rows table on jsfiddle

당신 중 일부는 좀 걸릴 수 있습니다 여기에

코드인가?

Answer 1

테이블을 다른 li로 이동하고 strong 태그를 먼저 배치하면 찾고있는 결과를 얻을 수 있습니다.

<div id="feat-exam" class="panel panel-info"> 
    <div class="panel-heading"> 
    <ul class="list-group"> 
     <li class="list-group-item" data-toggle="collapse" data-target=".RECEV" style="display:true"> 
     <strong>Recevability</strong> 
     </li> 
     <li class="collapse RECEV"> 

     <table style="width:100%"> 
      <tr> 
      <td> 
       <em>item1.1</em> 
      </td> 
      <td> 
       <em>item1.2</em> 
      </td> 
      </tr> 
      <tr> 
      <td> 
       <em>item2.1</em> 
      </td> 
      <td> 
       <em>item2.2</em> 
      </td> 
      </tr> 
     </table> 
     </li> 
    </ul> 
    </div> 
</div> 

https://jsfiddle.net/f030he9x/