Jquery 内部的数据表响应插件 bootstrap 3 折叠面板

Question

我在将 Jquery 数据 table（带有其自己的响应插件）放入 bootstrap 3 折叠面板时发现问题。

我发现的问题是，

如果包裹 table 的面板在开头折叠，即像这样设置包装器 div： <div id="collapseOne" class="panel-collapse collapse">，table 的列不会当我调整浏览器大小时崩溃。
如果包裹 table 的面板在开头折叠，即如果我将 "collapse" 从 class 移开，即 <div id="collapseOne" class="panel-collapse">，或将 "in" 添加到其 class，即 <div id="collapseOne" class="panel-collapse collapse in">，然后 table 工作正常。当 window 时，列可以折叠调整大小。

但是，我希望折叠面板默认保持关闭状态。所以我必须添加 "collapse" 到 class 没有 class "in".

我也查看了bootstrap源代码，

.collapse {
  display: none;
}
.collapse.in {
  display: block;
}

我在这上面花了几天时间，仍然不明白为什么 class "collapse" 会导致这个问题。

提前谢谢大家。

Answer 1

我想出了一个解决方法来解决我的问题。在页面加载后以编程方式隐藏面板。

Answer 2

我只是在做同样的事情：Bootstrap 合并项目与 Jquery 数据表。关闭折叠项时，打开折叠项后 dataTable 无法正确显示。打开折叠项后可以调整table，这将显示table：

$('.panel-collapse').on('shown.bs.collapse', function (e) {
  $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
});

这是一个工作示例的 JSFiddle：http://jsfiddle.net/buncjzLp/1/

来源：
https://www.datatables.net/forums/discussion/28234/responsive-issues-with-multiple-tables-and-bootstrap-tabs

Jquery Datatable responsive plugin inside bootstrap 3 collapsed panel