在 html 表中正确创建引导手风琴答案

【问题标题】：Correctly create bootstrap accordion in html table在 html 表中正确创建引导手风琴
【发布时间】：2015-09-30 12:11:51
【问题描述】：

我发现了几个与我试图完成的问题相似的问题，并实际上采取了其中一个示例并尝试适应做我想要实现的目标，但无济于事。

我希望能够在常规的 html 表中创建一个引导手风琴，但我似乎无法做到这一点。如果我单击第一个单元格，它会展开手风琴的 div，但是当我单击第二个单元格时，该单元格也会显示。如何使其正确地遵循手风琴风格，因为单击单个单元格一次只会折叠/展开单个部分。

我可以扩展多行，但我觉得有一些明显的东西我遗漏或做错了。我已经在这个问题上待了几个小时，但我仍然无法找到答案。谁能告诉我我做错了什么？

<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">$150.00</td>
            <td class="text-error"></td>
            <td class="text-success">$150.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">$11.00</td>
            <td class="text-error"></td>
            <td class="text-success">$161.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">$500.00</td>
            <td class="text-error"></td>
            <td class="text-success">$661.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 和引导列创建类似的表结构，这并不难，但我想要一个纯 html 表结构。我打算尝试在一个角度指令中使用它，并将它与我在表上运行的其他代码结合起来。

【问题讨论】：

这是我作为基础的原始问题：stackoverflow.com/questions/16389775/…

标签： twitter-bootstrap html-table accordion

【解决方案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>

【讨论】：

这张桌子真的很整洁，但它似乎并没有按照我的理解显示正确的手风琴行为。当我展开任何标题时，最后一个标题不应该自行折叠吗？我可以展开所有部分并单独折叠它们，但我认为它应该只允许在任何时候显示一个部分。
用一些 JS 修改。
你对 JS 非常得心应手。您发布的解决方案有效，但自然下一个后续问题是您知道这是否可以使用纯 html 标签实现？无论哪种方式，这几乎可以满足我的需求，并且可以进行调整以适合我的数据集。谢谢！
不，没有js是不可能的。对不起。