41

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

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

折叠的行仍然可见

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

4

6 回答 6

61

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

于 2013-08-28T18:56:45.513 回答
6

我只是想出了同样的问题，因为我们仍然使用引导程序 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>
于 2014-04-04T06:04:38.213 回答
4

您只需要将表格单元格填充设置为零。这是一个 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>

于 2015-03-13T11:18:02.730 回答
1

您使用的是哪个版本的 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>
于 2013-08-28T19:42:22.280 回答
1

您可以在不涉及任何 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;
}
于 2017-08-04T23:42:40.480 回答
0


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

于 2013-08-28T18:57:03.650 回答