我正在使用引导程序4。在我的项目中，我需要在另一个表中切换响应表。当我单击以展开显示内部表，然后再次单击折叠内部表时，如下图所示。
最佳答案
您可以使用此代码在另一个表中切换响应表
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script async="" src="//www.google-analytics.com/analytics.js"></script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr>
<td>- child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
<tr>
<td>- child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
</tbody>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr>
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr>
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
</body>
</html>