Question

我有一个表格，显示每行的一些信息，我想在你点击一行时有几个隐藏的行，信息的详细信息出现在一个可折叠的bootstrap中。

我正在使用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。

可折叠Bootstrap表行

1 个答案: