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

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>折りたたまれます。

HTMLに@Chadのソリューションを使用し、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 に答える