Bootstrap折叠表

Question

当我点击父行时,我试图让几行折叠.目前,我只能折叠一行,但我需要能够同时关闭+2行.

下面是我当前的代码,在这段代码中,当我点击第一行时,我无法弄清楚如何折叠"HIDDEN"和"HIDDEN 2"行.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
.hiddenRow {
    padding: 0 !important;
}
</style>


<div id="accordion" role="tablist" aria-multiselectable="true">
  <table class="table">
    <tr id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      <td>
        test
      </td>
    </tr>

    <tr>
      <td class="hiddenRow">
        <div id="collapseOne" class="collapse in" aria-labelledby="headingOne">HIDDEN</div>
      </td>
    </tr>

    <tr>
      <td class="hiddenRow">
        <div id="collapseTwo" class="collapse in" aria-labelledby="headingTwo">HIDDEN 2</div>
      </td>
    </tr>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

Answer 1

而不是id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"使用这个例子. https://jsfiddle.net/ayang10/DTcHh/33622/

<tr data-toggle="collapse" data-target=".order1">
  <td>+</td>
  <td>1001</td>
  <td>9/29/2016</td>
  <td>$126.27</td>
</tr>
<tr class="collapse order1">
  <td>1</td>
  <td></td>
  <td>Shirt</td>
  <td>$12.27</td>
</tr>
<tr class="collapse order1">
  <td>1</td>
  <td></td>
  <td>Shoes</td>
  <td>$62.27</td>
</tr>