Javascript 使用jQuery使表行可折叠

我有一张有几行的桌子。每行获得一个

数据id

属性，所有“子”节点获得一个

数据父id

属性

<table>
    <tr data-id="1"></tr>
      <tr data-id="1-1" data-parent-id="1"></tr>
        <tr data-id="1-1-1" data-parent-id="1-1"></tr>
          <tr data-id="1-1-1-1" data-parent-id="1-1-1"></tr>
    <tr data-id="2></tr>
      <tr data-id="2-1" data-parent-id="2"></tr>
      <tr data-id="2-2" data-parent-id="2"></tr>
        <tr data-id="2-2-1" data-parent-id="2-2"></tr>
        <tr data-id="2-2-2" data-parent-id="2-2"></tr>
        <tr data-id="2-2-3" data-parent-id="2-2"></tr>
    <tr data-id="3"></tr>
</table>

它确实会折叠和展开表中的行，但是如果所有行都展开了，并且我尝试折叠“最高级别”的节点，那么它只折叠第一个子节点，而不会折叠更深级别的节点

我如何确保它能折叠整个关卡

---

我想使用

nextAll（'tr[data parent id]'）。每个（function…

something.

最高级别的节点是否意味着你的第一个tr？只是一个旁注-分配样式和绑定事件处理程序的奇怪组合-

$（'tr[data id]'）。css（…）。单击（…）

。我认为最好使用单独的CSS类和所需的样式。伊利亚：我在javascript中设置CSS的原因是，如果javascript没有应用到表中，光标不应该改变。哦，为什么不在父TR中包装您的子元素，因为您的子元素是TR元素，那么您应该用另一个表包装它，它将是easier将通过该结构实现您想要的。

$('tr[data-id]').css('cursor', 'pointer').click(function() {
    var parentId = $(this).attr('data-id');

    // set status
    $(this).toggleClass('expanded collapsed');

    // collapse/expand child nodes
    $("tr[data-parent-id='" + parentId + "']").toggleClass('hidden');

    // icon
    $(this).children('td').children('i').toggleClass('fa-caret-right fa-caret-down');
});