可折叠的 Bootstrap 表行

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>

我已经尝试过这篇文章的解决方案， How do I collapse a table row in Bootstrap? ，但它没有用。

应该从一开始就折叠的行没有折叠，即使我可以看到单击时应用的更改，这些行也没有任何反应。

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"); });

有关工作示例，请参阅 my fiddle。