Javascript Bootstrap 3-展开正在折叠的嵌套表行

我有一个使用Bootstrap3的网页。在本页中，我试图展示祖父母、父母和孩子之间的关系。为此，我有可以展开/折叠的表行。我已经设置了一个引导层。我的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>

祖父母

名称
创建于
最后修改
父1
04/02/2017
04/04/2017
孩子A
04/01/2017
04/05/2017
孩子B
04/03/2017
04/04/2017
家长2
04/03/2017
04/10/2017
儿童X
04/10/2017
04/11/2017

---

当祖父母或父母被展开时，我试图将相关图标从“>”更改为“v”。然而，这不起作用。我不明白为什么。感谢您的帮助。

这里有一个固定版本，请根据您的喜好更改代码

但本质上

show.bs.collapse

和

hide.bs.collapse

事件是从

.collapse

而不是

data toggle=“collapse”

元素触发的。

此外，还需要将

数据目标

分配给表行

预演

HTML

---

您可以通过添加两件事来完成您想要做的事情：

一个

折叠的

类，每次单击祖父母或父母时都会进行切换，以表示它是展开还是折叠的

添加CSS，这样当

折叠的
类处于活动状态时，它会显示“>”，而当它不处于活动状态时（它被展开），它会显示一个“v”

您的主要问题是缺少父行的

数据目标

，并且您只在jQuery中更改了祖父母图标

键jQuery

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

关键CSS

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

---

看起来show.bs.collapse事件和hidden.bs.collapse不会被触发。这些事件是由bootstrap触发的吗？为什么不在示例中展开/折叠“父1”和“父2”？

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

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