cen*_*tic 5 javascript jquery twitter-bootstrap twitter-bootstrap-3
我使用bootstrap和jquery来构建可折叠元素.在HTML表格之外使用它们时,它工作正常,但是当我在表格中使用它时,在项目崩溃之前有一个明显的短暂时间,扩展也很好.
请参阅此JSFiddle代码段
任何线索？示例页面的完整HTML代码如下所示
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a href="#" data-toggle="collapse" data-target="#querybox">normal collapse</a>
<div id="querybox" class="collapse">
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
some long text<br/>
</div>
<table>
<tr>
<td>
<a href="#" data-toggle="collapse" data-target="#contentholder1">slow collapse</a>
</td>
</tr>
<tr id="contentholder1" class="collapse">
<td>234</td>
<td>
<div>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
sometext<br/>
</div>
</td>
</tr>
</table>
</body>
</html>
尝试DIV在你的内部执行崩溃TR.表元素有不同的display风格,我认为这是导致效果差异的原因.
使用https://jsfiddle.net/k2od0ntj/1/的示例table
或者,您真的需要一个表来表示您的数据吗？您可以使用divs以及display表元素使用的选项来创建相同的效果,并更改在转换期间应用的display样式..collapsing
<div class="div-table"> <!-- <table> -->
<div class="div-tr"> <!-- <tr> -->
<div class="div-td"> <!-- <td> -->
<a data-toggle="collapse" data-target="#contentholder1">slow collapse</a>
</div>
</div>
<div id="contentholder1" class="div-tr collapse">
<div class="div-tr">
没有示例table:https://jsfiddle.net/k2od0ntj/3/
| 归档时间： |
|
| 查看次数： |
7216 次 |
| 最近记录： |