Bootstrap 3 - 扩展折叠嵌套表行

Question

我有一个使用Bootstrap 3的网页.在这个页面中,我试图显示祖父母,父母和孩子之间的关系.为此,我有可以展开/折叠的表行.我在这里设置了一个Bootply .我的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>

当祖父母或父母被扩展时,我正在尝试将相关图标从">"更改为"v".但是,这不起作用.我不明白为什么.任何帮助表示赞赏.

Answer 1

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

1. collapsed每次单击祖父母或父级时切换的类,表示它是展开还是折叠.
2. 添加CSS,以便在collapsed类处于活动状态时显示">",当它处于非活动状态(已展开)时,它会显示"v".

在这里更新了Bootply

你的主要问题是data-target你的父行缺少了,你也只是用你的jQuery更改了祖父母图标.

关键jQuery

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

关键CSS

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