在 html table 中正确创建 bootstrap 手风琴

Question

我发现了几个与我试图完成的问题相似的问题，并实际拿了其中一个例子并试图适应做我想实现的事情但无济于事。

我希望能够在常规 html table 中创建一个 bootstrap 手风琴，但我似乎做不好。如果我单击第一个单元格，它会展开手风琴的 div，但是当我单击第二个单元格时，该单元格也会显示。我怎样才能让它正确地遵循手风琴风格，因为单击一个单元格一次只会 collapse/expand 一个部分。

我可以扩展多行，但我觉得我明显遗漏了一些东西或做错了。我已经在这几个小时了，但答案仍然在躲避我。谁能告诉我我做错了什么？

<body>
<table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
        <tr>
            <th>#</th>
            <th>Date</th>
            <th>Description</th>
            <th>Credit</th>
            <th>Debit</th>
            <th>Balance</th>
        </tr>
    </thead>
    <tbody id ="accordion" class="accordion-group">
        <tr>
            <td data-toggle="collapse" data-target="#demo1" class="accordion-toggle" data-parent="#accordion">1</td>
             <td data-toggle="collapse" data-target="#demo22" class="accordion-toggle" data-parent="#accordion">05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">0.00</td>
            <td class="text-error"></td>
            <td class="text-success">0.00</td>
        </tr>
        <tr >
            <td colspan="6" class="hiddenRow">
                <div class=" accordian-body collapse" id="demo1"> Demo1 </div>
                <div class="accordian-body collapse" id="demo22"> Demo22 </div>
            </td>
        </tr>
    </tbody>    
    <tbody>
        <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
            <td>2</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">.00</td>
            <td class="text-error"></td>
            <td class="text-success">1.00</td>
        </tr>
        <tr>
            <td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td>
        </tr>
        <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
            <td>3</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">0.00</td>
            <td class="text-error"></td>
            <td class="text-success">1.00</td>
        </tr>
        <tr>
            <td colspan="6"  class="hiddenRow"><div id="demo3" class="accordian-body collapse">Demo3</div></td>
        </tr>
    </tbody>
</table>
</body>

http://jsfiddle.net/2Dj7Y/2082/

我可以使用所有 div 和 bootstrap 列创建一个类似的 table 结构，这并不难，但我想要一个纯粹的 html table结构。我打算尝试在 angular 指令中使用它，并将它与我在 tables.

上运行的其他代码结合起来

Answer 1

看看这是否有帮助：我相信这就是您想要做的，如果是这样，那只是您的数据目标略有偏差。

$('.accordian-body').on('show.bs.collapse', function () {
    $(this).closest("table")
        .find(".collapse.in")
        .not(this)
        .collapse('toggle')
})

tbody tr.info td:hover {
  background-color: #266080;
  color: #fff;
  -webkit-transition-duration: 500ms;
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3>Collapsing Tables</h3>

    </div>
    <div class="panel-body">
      <table class="table table-condensed">
        <thead>
          <tr>
            <th>Name</th>
            <th>Date</th>
            <th>EMail</th>
            <th>Phone</th>
            <th>ID #</th>
          </tr>
        </thead>
        <tbody>
          <tr class="info">
            <td data-toggle="collapse" data-target="#table1" class="accordion-toggle">One</td>
            <td data-toggle="collapse" data-target="#table2" class="accordion-toggle">Two</td>
            <td data-toggle="collapse" data-target="#table3" class="accordion-toggle">Three</td>
            <td data-toggle="collapse" data-target="#table4" class="accordion-toggle">Four</td>
            <td data-toggle="collapse" data-target="#table5" class="accordion-toggle">Five</td>
          </tr>
          <tr>
            <td colspan="12" class="hiddenRow">
              <table class="table table-striped">
                <thead>
                  <tr class="accordian-body collapse" id="table1">
                    <td><a href="#">Link</a>

                    </td>
                    <td>Sub-A</td>
                    <td>Sub-B</td>
                  </tr>
                  <tr class="accordian-body collapse" id="table2">
                    <th>One-A</th>
                    <th>Two-A</th>
                    <th>Three-A</th>
                    <th>Four-A</th>
                    <th>Five-A</th>
                    <th>Six-A</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="accordian-body collapse" id="table3">
                    <td>One-B</td>
                    <td>Two-B</td>
                    <td>Three-B</td>
                    <td>Four-B</td>
                    <td>Five-B</td>
                    <td>Six-B</td>
                  </tr>
                  <tr class="accordian-body collapse" id="table4">
                    <td>One-C</td>
                    <td>Two-C</td>
                    <td>Three-C</td>
                    <td>Four-C</td>
                    <td>Five-C</td>
                    <td>Six-C</td>
                  </tr>
                  <tr class="accordian-body collapse" id="table5">
                    <td>One-D</td>
                    <td>Two-D</td>
                    <td>Three-D</td>
                    <td>Four-D</td>
                    <td>Five-D</td>
                    <td>Six-D</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

在 html table 中正确创建 bootstrap 手风琴

Correctly create bootstrap accordion in html table

html-table

accordion

twitter-bootstrap