Question

我发现了几个类似于我想要完成的问题，并且实际上采用了其中一个例子，并试图适应我想要实现的目标但无济于事。

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

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

＆＃13;

<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>

＆＃13;

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

我能够使用所有div和bootstrap列创建一个类似的表结构并不难，但我想要一个纯html表结构。我打算尝试在angular指令中使用它，并将它与我在表上运行的其他代码结合起来。

Answer 1

看看这是否有帮助：我相信这是您尝试做的事情，如果是这样，那么您的数据目标就会略微偏离。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

在html表

1 个答案: