可折叠引导表行

Question

我有一个表显示每行的一些信息，我想在单击一行几个隐藏行时，从引导可折叠中显示信息的详细信息。

我正在使用bootstrap 2.3（现在无法更新），这里是我的表的代码：

<table class="table table-striped" id="table_package">
 <thead>
   <tr>
     <th class="hidden-mobile">Name package</th>
     <th class="hidden-mobile">Minutes</th>
     <th class="hidden-mobile">Remaining</th>
     <th>Status</th>
     <th>Action</th>
     <th></th>
   </tr>
 </thead>
 <tbody>
     <tr id="package_id_1" data-toggle="collapse" data-target=".transactions_1"class="clickable collapsed">
       <td id="package_name_1" class="hidden-mobile">Intro</td>
       <td id="package_hours_1" class="hidden-mobile">240 minutes</td>
       <td id="package_remaining_1" class="hidden-mobile">0 minutes</td>
       <td id="confirmed_status_1"><span class="s_blue">finished</span></td>
       <td class="action-table "></td>
       <td></td>
     </tr>
     <tr class="out transactions_1 collapse">
       <td>Event</td>
       <td>Starting Time</td>
       <td>Remaining Time</td>
       <td>Date Time</td>
       <td></td>
     </tr>
 </tbody>

.

我已经尝试了这篇文章的解决方案， 如何折叠引导中的表行？ ，但它不起作用。

应该从Beggines折叠的行没有折叠，即使我可以看到单击时应用的更改，行不恰及行。

Answer 1

我通过其他解决方案扫描，并找到了一个适合您的解决方案。

<table class="table table-striped" id="table_package">
 <thead>
   <tr>
     <th class="hidden-mobile">Name&nbsp;package</th>
     <th class="hidden-mobile">Minutes</th>
     <th class="hidden-mobile">Remaining</th>
     <th>Status</th>
     <th>Action</th>
     <th></th>
   </tr>
 </thead>
 <tbody>
     <tr id="package_id_1" data-toggle="myCollapse" data-target=".transactions_1">
       <td id="package_name_1" class="hidden-mobile">Intro</td>
       <td id="package_hours_1" class="hidden-mobile">240 minutes</td>
       <td id="package_remaining_1" class="hidden-mobile">0 minutes</td>
       <td id="confirmed_status_1"><span class="s_blue">finished</span></td>
       <td class="action-table "></td>
       <td></td>
     </tr>
     <tr class="transactions_1 myCollapse in">
       <td>Event</td>
       <td>Starting Time</td>
       <td>Remaining Time</td>
       <td>Date Time</td>
       <td></td>
     </tr>
 </tbody>
</table>

.

HTML略微修改，我使用的CSS是这样：

.myCollapse { display: none; } .myCollapse.in { display: table-row; }

这一点的javascript是努力工作：

$("[data-toggle=myCollapse]").click(function( ev ) { ev.preventDefault(); $(this.getAttribute('data-target')).toggleClass("in"); });

请参阅我的fiddle 对于一个工作示例。