Question

我在我的应用程序中使用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>

这将正确显示和隐藏行的内容，但折叠的行仍然可见。见这个截图：

Collapsed row still visible

屏幕截图中的灰线显示额外的行。如何从视图中完全删除此行？

Answer 1

您正在使用表格行（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/

Answer 2

我刚刚提出同样的问题，因为我们仍然使用bootstrap 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>

Answer 3

您只需将表格单元格填充设置为零。这里是一个jsfiddle（使用Bootstrap 2.3.2），代码略有修改：

http://jsfiddle.net/marciowerner/fhjgn7b5/4/

javascript是可选的，只有在你想使用零以外的单元格填充时才需要。

＆＃13;

$('.collapse').on('show.bs.collapse', function() {
  $(this).parent().removeClass("zeroPadding");
});

$('.collapse').on('hide.bs.collapse', function() {
  $(this).parent().addClass("zeroPadding");
});

＆＃13;

.zeroPadding {
  padding: 0 !important;
}

＆＃13;

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
</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 class="zeroPadding">
        <div class="collapse out" id="collapseme">Should be collapsed</div>
      </td>
    </tr>
  </table>
</body>

＆＃13;

Answer 4

您使用的是哪个版本的Bootstrap？我很困惑，我可以让@ Chad的解决方案在jsfiddle工作，但不能在本地工作。所以，我检查了jsfiddle使用的Bootstrap版本，它使用的是3.0.0-rc1版本，而getbootstrap.com上的默认版本是版本2.3.2。

在2.3.2中，collapse类没有被in类替换。单击按钮时，只会附加in类。在版本3.0.0-rc1中，collapse类正确删除，<tr>崩溃。

使用@ Chad的html解决方案，并尝试使用这些链接来引用Bootstrap：

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>

Answer 5

您可以在不涉及任何JavaScript的情况下执行此操作

（使用已接受的答案）

HTML

<table class="table table-bordered table-striped">
    <tr>
        <td><button class="btn" data-target="#collapseme" data-toggle="collapse" type="button">Click to expand</button></td>
    </tr>
    <tr>
        <td class="nopadding">
            <div class="collapse" id="collapseme">
                <div class="content">
                    Show me collapsed
                </div>
            </div>
        </td>
    </tr>
</table>

CSS

.nopadding {
    padding: 0 !important;
}

.content {
    padding: 20px;
}

Answer 6

问题是崩溃项（div）嵌套在表元素中。 div被隐藏，表的tr和td仍然可见，并且一些css样式被应用于它们（边框和填充）。
你为什么要用桌子？有原因吗？当你不必使用它们时，不要使用它们： - ）

如何折叠Bootstrap中的表行？

6 个答案: