如何在Bootstrap中折叠表行？ [英] How do I collapse a table row in Bootstrap?
问题描述
我在我的应用程序中使用Bootstrap 2.3.2，我需要使用collapse插件完全隐藏一行。下面是一个示例：
I am using Bootstrap 2.3.2 in my app and I need to completely hide a row using the collapse plugin. Below is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Collapse test</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap-collapse.js"></script>
</head>
<body>
<table class="table table-bordered table-striped">
<tr>
<td>
<button type="button" class="btn" data-toggle="collapse" data-target="#collapseme">
Click to expand
</button>
</td>
</tr>
<tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr>
</table>
</body>
</html>
这将正确显示和隐藏该行的内容，但折叠行仍然可见。请参阅以下屏幕截图：
This will correctly show and hide the contents of the row, but the collapsed row is still visible. See this screenshot:
屏幕截图中的灰线表示额外的行。
The grey line in the screenshot shows the extra row. What can I do to completely remove this row from view?
推荐答案
您正在表格行中的div上使用collapse tr）。所以当你折叠div，行仍然在那里。您需要将其更改为您的id和类位于tr而不是div。
You are using collapse on the div inside of your table row (tr). So when you collapse the div, the row is still there. You need to change it to where your id and class are on the tr instead of the div.
更改为：
<tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr>
：
<tr class="collapse out" id="collapseme"><td><div>Should be collapsed</div></td></tr>
JSFiddle： http://jsfiddle.net/KnuU6/21/
JSFiddle: http://jsfiddle.net/KnuU6/21/
编辑：如果您无法升级到3.0.0，我发现了一个JQuery解决方法2.3.2：
If you are unable to upgrade to 3.0.0, I found a JQuery workaround in 2.3.2:
删除您的数据切换和数据目标，并将此JQuery添加到您的按钮。
Remove your data-toggle and data-target and add this JQuery to your button.
$(".btn").click(function() {
if($("#collapseme").hasClass("out")) {
$("#collapseme").addClass("in");
$("#collapseme").removeClass("out");
} else {
$("#collapseme").addClass("out");
$("#collapseme").removeClass("in");
}
});
JSFiddle： http://jsfiddle.net/KnuU6/25/
JSFiddle: http://jsfiddle.net/KnuU6/25/
这篇关于如何在Bootstrap中折叠表行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
