Twitter Bootstrap在表格单元格上使用collapse.js [即将完成]
我正在工作的帐户页面，其中列出了交易(贷方和借方)。我希望用户能够点击一个表行，它会展开，显示更多信息。
我正在使用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/
唯一的问题是它在错误的位置显示"dropdown information“，我想添加一个新的行，而不是打印在表格的顶部
我还尝试添加一个新的表行(它只显示行，没有折叠操作(只应用于第一行))
<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>干杯，谢谢你的帮助
回答 3
Stack Overflow用户
发布于 2013-06-01 03:40:33
我不确定你是否已经解决了这个问题，但我今天必须做一些非常类似的工作，我让你的小提琴像你所问的那样工作，基本上我做的是在它下面做了另一个表格行，然后使用了手风琴控件。我试着使用折叠，但不能让它工作，并且在某个地方看到了一个例子，所以使用了accordion。
这是你最新的提琴：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>Stack Overflow用户
发布于 2014-10-28 02:26:05
在Tony的answer上进行扩展，并回答Dhaval Ptl的question，为了获得真正的折叠效果并且一次只允许展开一行，可以像这样添加show.bs.collapse的事件处理程序：
$('.collapse').on('show.bs.collapse', function () {
$('.collapse.in').collapse('hide');
});我在这里修改了他的示例以完成此操作：http://jsfiddle.net/QLfMU/116/
Stack Overflow用户
发布于 2015-06-12 01:46:41
如果使用Angular的ng-repeat来填充表，则hackel的jquery代码片段将不会通过将其放入文档加载事件中而起作用。在angular完成对表的渲染之后，您需要运行代码片段。
要在ng-repeat呈现之后触发事件，请尝试以下指令：
var app = angular.module('myapp', [])
.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
});angular中的完整示例：http://jsfiddle.net/ADukg/6880/
我从这里得到了指令：Use AngularJS just for routing purposes
https://stackoverflow.com/questions/16389775
复制相似问题