javascript - Bootstrap 3 - 展开折叠的嵌套表行

Question

我有一个使用 Bootstrap 3 的网页。在这个页面中，我试图展示祖 parent 、 parent 和 child 之间的关系。为此，我有可以展开/折叠的表格行。我已经设置了一个 Bootply here .我的 HTML 如下所示:

<div id="grandparent" class="list-group-item">
    <div data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent">
        <ul class="list-inline">
            <li id="grandparentIcon">&gt;</li>
            <li>Grandparent</li>
        </ul>
    </div>

    <div class="collapse" id="grandparentContent" aria-expanded="true">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Created On</th>
            <th>Last Modified</th>
          </tr>
        </thead>

        <tbody>
          <tr data-toggle="collapse">
            <td><div>&gt;</div></td>
            <td>Parent 1</td>
            <td>04/02/2017</td>
            <td>04/04/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child A</td>
            <td>04/01/2017</td>
            <td>04/05/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child B</td>
            <td>04/03/2017</td>
            <td>04/04/2017</td>
          </tr>          

          <tr data-toggle="collapse">
            <td><div>&gt;</div></td>
            <td>Parent 2</td>
            <td>04/03/2017</td>
            <td>04/10/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child X</td>
            <td>04/10/2017</td>
            <td>04/11/2017</td>
          </tr>          
        </tbody>
      </table>
    </div>
</div>

当扩展祖 parent 或 parent 时，我试图将相关图标从“>”更改为“v”。但是，这不起作用。我不明白为什么。任何帮助表示赞赏。

Answer 1

你可以通过添加两件事来做你想做的事情:

一个 collapsed每次单击祖 parent 或 parent 时切换的类，以表示它是展开还是折叠。

添加 CSS 以便当 collapsed类是事件的，它显示“>”，当它不活动(它被扩展)时，它显示一个“v”。

Updated Bootply Here

你的主要问题是你错过了 data-target对于您的父行，您也只是用您的 jQuery 更改祖 parent 图标。

关键 jQuery

$('[data-toggle="collapse"]').on('click', function() {
  $(this).toggleClass('collapsed');
});

关键 CSS

.collapsed .icon-class:before {
    content: '>';
}
.icon-class:before {
    content: 'v';
}