如何在 Bootstrap 中折叠表格行？答案

【问题标题】：How do I collapse a table row in Bootstrap?如何在 Bootstrap 中折叠表格行？
【发布时间】：2013-08-31 23:37:18
【问题描述】：

我在我的应用程序中使用 Bootstrap 2.3.2，我需要使用折叠插件完全隐藏一行。下面是一个例子：

<!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>

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

屏幕截图中的灰线显示了额外的行。我该怎么做才能完全从视图中删除该行？

【问题讨论】：

标签： javascript css twitter-bootstrap

【解决方案1】：

您正在表格行 (tr) 内的 div 上使用折叠功能。因此，当您折叠 div 时，该行仍然存在。您需要将其更改为您的 id 和 class 在 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。我之前曾尝试过（在 2.3.2 中），但它坏了。我想真正的答案是升级到 3.0.0。叹息...不是一个简单的升级，因为有很多变化并且没有迁移指南 AFAICT。
那是我的错误。我将我的 bootstrap 版本（3.0.0）扔进了我的小提琴，并认为这样的东西不会在旧版本上被破坏。我希望它对您有所帮助，并且您可以使用它！
如果您无法进行升级，我添加到我的答案中并提供了 2.3.2 解决方法。
在小提琴中，它仍然使用 3.0.0 CSS，所以如果你使用整个 2.3.2 包，2.3.2 解决方法没有帮助。 .collapse 的 CSS 在 2.3.2 中有所不同。
@Maelish 您可以在每一行上使用一个类，而不是在单行上使用一个 ID。这是否像您正在寻找的东西？ jsfiddle.net/KnuU6/1165

【解决方案2】：

因为我们仍然使用引导程序 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。
你先生应该得到更多的支持，这就是答案。谢谢你。顺便说一句，我还必须在显示中使用 table-row，就像之前的评论一样。
这确实像一个魅力。我现在的问题是，我怎样才能在多行上做这个技巧？似乎这只适用于一个。

【解决方案3】：

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

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

javascript 是可选的，仅当您想使用非零的单元格填充时才需要。

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

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

.zeroPadding {
  padding: 0 !important;
}

<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>

【讨论】：

【解决方案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>

【讨论】：

是的，正如我在问题中提到的，它是 2.3.2。

【解决方案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;
}

【讨论】：

【解决方案6】：

问题是折叠项（div）嵌套在表格元素中。 div 被隐藏，表格的 tr 和 td 仍然可见，并且一些 css 样式应用于它们（边框和填充）。
你为什么用桌子？有没有理由？当您不必使用它们时，不要使用它们:-)

【讨论】：

@chad 的解决方案似乎是上帝 :-)
采用 3er 版本或避免使用表格 :-) 使用 jquery，您可以监控更改或单击事件或其他 smtg，然后您可以轻松更改 css。