Twitter Bootstrap 在表格单元格上使用 collapse.js \[几乎完成\]

Question

我正在处理一个列出交易（贷方和借方）的帐户页面。我希望用户能够点击表格行，它会展开显示更多信息。

我正在使用 Twitter bootstrap 并查看了文档，这就是我得到的结果

<table class="table table-striped" id="account-table">
<thead>
    <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Balance</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class="">
        <td>1</td>
        <td>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>
        <div id="demo1" class="demo out collapse">Demo1</div>
    </tr>

请参阅：http: //jsfiddle.net/2Dj7Y/

唯一的问题是它在错误的地方显示了“下拉信息”，我想添加一个新行，而不是在表格顶部打印

我还尝试添加一个新的表格行（只显示该行，并且没有折叠操作（仅适用于第一行）

  <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >
            <td>1</td>
            <td>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 id="demo1" class="demo out collapse">
                    <td>1</td>
                    <td>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>

参见 http://jsfiddle.net/ypuEj/

原文由 JamesWatling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不确定你是否已经克服了这个问题，但我今天不得不做一些非常相似的事情，我让你的小提琴像你要求的那样工作，基本上我所做的是在它下面制作另一个表格行，然后使用手风琴控制。我尝试仅使用 collapse 但无法使其正常工作，并在 SO 上的某处看到了一个使用手风琴的示例。

这是您更新的小提琴：http: //jsfiddle.net/whytheday/2Dj7Y/11/

因为我需要在这里发布代码，所以每个可折叠的“部分”应该是什么样子 ->

 <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
    <td>1</td>
    <td>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="accordion-body collapse" id="demo1">Demo1</div>
    </td>
</tr>

原文由 Tony 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

扩展 Tony 的 答案，并回答 Dhaval Ptl 的 问题，以获得真正的手风琴效果并且一次只允许扩展一行，可以像这样添加 show.bs.collapse 的事件处理程序：

 $('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});

我修改了他的示例以在此处执行此操作：http: //jsfiddle.net/QLfMU/116/

原文由 hackel 发布，翻译遵循 CC BY-SA 3.0 许可协议