Bootstrap 4 中的可折叠表答案

【问题标题】：Collapsible Tables in Bootstrap 4Bootstrap 4 中的可折叠表
【发布时间】：2017-01-31 02:59:50
【问题描述】：

所以我正在使用 Bootstrap 4 和 Meteor 并尝试创建一个在您单击行元素时折叠的表格。即使我正在使用colspan="3"，我在将折叠行调整为第一个<td> 元素的大小时遇到问题。这是 HTML：

<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>School</th>
      <th>Tech</th>
      <th>Date</th>
    </tr>
  </thead>
  {{#each school}}
  <tbody>
    <tr class="school-row">
      <td scope="row">{{trimString name}}</td>
      <td>{{trimString tech}}</td>
      <td>{{formatDate createdAt}}</td>
    </tr>
    <tr class="room-collapse">
      <td scope="row" colspan="3" data-parent=".room-collapse">
        <p>Hello this is a test.</p>
      </td>
    </tr>
  </tbody>
  {{/each}}
</table>

我使用.room-collapse 作为 jQuery 目标。目前我没有应用任何额外的样式，并且 jQuery 触发器工作正常。有什么想法还是这只是一个错误？

【问题讨论】：

很多时候，在 Meteor/Blaze 中使用 JS 驱动的 UI 更改时，您会遇到时间问题，即 JS 在页面加载时执行，但元素尚不存在。例如，您有一些 JS 在触发文档 onReady 时使一堆单元格不可见。在 Meteor/Blaze 中，onReady 会在页面构建时发生，但表格单元格将不存在，因为页面是被动构建的并且尚未完成。也许是这样？唯一的解决方案是 a) 对页面使用服务器端渲染，或者 b) 将有问题的代码放在模板的 onRendered 中。
在上面的例子中，.room-collapse 在点击.school-row 时触发。我还有一个 #if Template.subscriptionsReady 声明围绕整个模板。您可能是对的，但在我看来，这似乎是一个处理 Bootstrap 的表格和折叠的错误。当我将目标放在<table> 元素上时，折叠表调整了大小，但是当我用<div> 包裹表格并将目标放在 div 中时，它按预期执行。
问题是：驱动更新DOM的机制是否由JS驱动，如果是，它是否依赖于JS运行时准备好的DOM，还是它正在做一个事件委托。我真的不知道内置在 CSS 中来处理基于点击的显示/隐藏某些东西，即使在某处不需要 JS。由于 DOM 的构建方式以及 onReady 事件的触发时间，我一次又一次地看到 Meteor 破坏这样的东西。如果您认为这是 BS4 中的错误，请查看是否可以使用纯 JS 和 HTML 重新创建并将 Meteor 排除在外。

标签： twitter-bootstrap meteor

【解决方案1】：

这里的问题只是 Collapse 目标元素在我的例子中需要是 <div>。我尝试附加到折叠的任何表格元素都失败了，但是在我嵌套了 <div> 之后，我很高兴。以下代码为例：

    <table class="table">
      <thead class="thead-inverse">
        <tr>
          <th>School</th>
          <th>Tech</th>
          <th>Date</th>
        </tr>
      </thead>
      {{#each school}}
      <tbody>
        <tr class="school-row">
          <td scope="row">{{trimString name}}</td>
          <td>{{trimString tech}}</td>
          <td>{{formatDate createdAt}}</td>
        </tr>
        <tr>
          <td scope="row" colspan="3">
            <div class="room-collapse">
              <p>Hello this is a test.</p>
            </div>
          </td>
        </tr>
      </tbody>
      {{/each}}
    </table>

希望这对某人有所帮助。这似乎与 Bootstrap 4 或我正在使用的特定包（即twbs:bootstrap@=4.0.0-alpha2）有关。

简答：将折叠包裹在 <div class="target"> 中，“目标”是您的目标 .class 或 #id。

【讨论】：