如何折叠Bootstrap中的表行？
And*_*erg 33 javascript css twitter-bootstrap
我在我的应用程序中使用Bootstrap 2.3.2,我需要使用collapse插件完全隐藏一行.以下是一个例子:
<!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>
这将正确显示和隐藏行的内容,但折叠的行仍然可见.看这个截图:
屏幕截图中的灰线显示额外的行.如何从视图中完全删除此行？
Tri*_*y12 51
您正在表行(tr)内的div上使用折叠.所以当你折叠div时,行仍然存在.您需要将其更改为您的id和类在tr而不是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/
编辑:如果您无法升级到3.0.0,我在2.3.2中找到了一个JQuery解决方法:
删除数据切换和数据目标,并将此JQuery添加到按钮.
$(".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/
因为我们仍然使用引导程序2.3.2，所以我提出了同样的问题。
我对此的解决方案：http : //jsfiddle.net/KnuU6/281/
CSS：
.myCollapse {
display: none;
}
.myCollapse.in {
display: block;
}
javascript：
$("[data-toggle=myCollapse]").click(function( ev ) {
ev.preventDefault();
var target;
if (this.hasAttribute('data-target')) {
target = $(this.getAttribute('data-target'));
} else {
target = $(this.getAttribute('href'));
};
target.toggleClass("in");
});
的HTML：
<table>
<tr><td><a href="#demo" data-toggle="myCollapse">Click me to toggle next row</a></td></tr>
<tr class="collapse" id="#demo"><td>You can collapse and expand me.</td></tr>
</table>
- 在我的情况下，隐藏的表格行跨越了多列，因此我不得不更改为“ display：table-row”，而不仅仅是“ block”。 (4认同)
| 归档时间： |
|
| 查看次数： |
130538 次 |
| 最近记录： |