Как свернуть строку таблицы в 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>

Это будет правильно отображать и скрывать содержимое строки, но свернутая строка все еще видна. Смотрите скриншот:

Серая линия на снимке экрана показывает дополнительную строку. Что я могу сделать, чтобы полностью удалить эту строку из представления?

Ответы

Ответ 1

Вы используете сбой на div внутри вашей строки таблицы (tr). Поэтому, когда вы разрушаете 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/

EDIT: если вы не можете обновить до 3.0.0, я нашел обходное решение JQuery в версии 2.3.2:

Удалите данные и перетащите данные и добавьте этот 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

Я просто столкнулся с той же проблемой, поскольку мы все еще используем 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>

Ответ 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, но не локально. Итак, я проверил версию Bootstrap, используемую jsfiddle, и использовал версию 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>

Ответ 5

проблема в том, что элемент collapse (div) вложен в элементы таблицы. Div скрыт, tr и td таблицы все еще видны, и к ним применяются некоторые CSS-стили (граница и дополнение).
Почему вы используете таблицы? Есть ли причина? Когда вам не нужно будет их использовать, не используйте их: -)

Ответ 6

Вы можете сделать это без участия 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;
}