Question

我有一个电影网站，您可以点击演员电影中的标题，然后展开以显示随附的用户评论。我正在使用Bootstrap3的折叠功能，如下所述：http://getbootstrap.com/javascript/#collapse。

但是，我在表格中使用它而不是通常的div。它正在工作，但漂亮的幻灯片动画已经丢失。我没有触及Bootstrap的文件，只是将必要的类应用于表。我在SO上发现的问题与将崩溃功能简单地用于表格有关，我已经完成了。我只是想让它像你使用div时一样滑动。

呈现的HTML（动态生成）：

<div class="panel-group" id="#movie-accordion">
<table class="table mysite-grid movies-table">
  <tbody>
    <!-- For each film and its accompanying reviews, two rows: -->
    <tr class="panel panel-default">
      <td>2008</td>
      <td><a href="#">Vicky Cristina Barcelona</a></td>
      <td>
        <span class="panel-title">
            <a class="btn btn-inverse btn-block" data-parent="#movie-accordion" data-toggle="collapse" href="#52539"></a>
        </span>
      </td>
    </tr>
    <!-- changes class from "collapse" to "collapsing" in between states, and replaces it with "collapse in" when panel is expanded -->
    <tr class="panel-collapse collapse" id="52539" style="height:auto;">
        <td class="panel-body" colspan="3">
          <!-- loop and print out each review (title, body, author, etc.) -->
        </td>
    </tr>
  </tbody>
</table>
</div>

CSS（Sass）：

tr.panel-default {
  border: none;
}

tr.panel-collapse.in {
  width: 100%;
}

/* Crucial for review to span all columns, in conjunction w/ colspan */
tr.collapse.in {
  display: table-row;
}

.movies-table tr:not(.panel-collapse),
.tvshows-table tr:not(.panel-collapse) { 
  td:first-child {
    width: 20%;
  }
  td:nth-child(2), td:last-child {
    width: 40%;
  }
  a.btn {
    color: white;
    border: none;
    width: 50%;       // Originally 25%; adjusted for smaller viewport widths
    margin-left: 38%; 
  }
}

Bootstrap的崩溃功能是否有部分我没有延续到表格布局？我觉得我不需要添加JavaScript来实现这一点，但如果这就是它需要......

使用Bootstrap3＆＃39; collapse＆＃39;保留幻灯片效果。在表格中

0 个答案: