Bootstrap 4 树状表问题。无法让所有孩子正确关闭答案

【问题标题】：Bootstrap 4 Tree-Like Table Question. Not able to get all children to close properlyBootstrap 4 树状表问题。无法让所有孩子正确关闭
【发布时间】：2020-04-19 14:21:00
【问题描述】：

在纯 Bootstrap 和 Jquery 中，我试图组合一个表树结构。也就是说，您有一个表，其行为类似于具有可折叠行的手风琴。我正在使用该元素来保存我的折叠引导程序和 jquery 信息。我在下面有以下页面。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Bootstrap Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <table class="table" id="Skills">
            <tr id="ArtisticHeader" data-toggle="collapse" data-target="#Artistic" aria-expanded="true" aria-controls="Artistic">
                <td>Artistic</td>
            </tr>
            <tr id="Artistic" class="collapse" aria-labelledby="ArtisticHeader">
                <td>Painting</td>
            </tr>
            <tr id="Artistic" class="collapse" aria-labelledby="ArtisticHeader">
                <td>Drawing</td>
            </tr>
            <tr id="CombatHeader" data-toggle="collapse" data-target="#Combat" aria-expanded="true" aria-controls="#Combat #Combat_Weapons">
                <td>Combat</td>
            </tr>
            <tr id="Combat" class="collapse" data-toggle="collapse" data-target="#Combat_Weapons" aria-controls="#Combat_Weapons">
                <td>weapons</td>
            </tr>
            <tr class="collapse" id="Combat_Weapons">
                <td>one handed</td>
            </tr>
            <tr class="collapse" id="Combat_Weapons">
                <td>two handed</td>
            </tr>
            <tr id="Combat" class="collapse" data-toggle="collapse" data-target="#Combat_Missiles" aria-controls="#Combat_Missiles">
                <td>Missiles</td>
            </tr>
            <tr class="collapse" id="Combat_Missiles">
                <td>Bows</td>
            </tr>
            <tr class="collapse" id="Combat_Missiles">
                <td>Sling</td>
            </tr>
        </table>
    </div>
</body>

</html>

问题是，当我在一个子项中有一个子项时，根据页面上的示例，当您单击 Combat 然后 Weapons 时，您会看到一个列表。再次点击 Combat，我希望战斗中的所有物品都崩溃。我的并没有把所有东西都折叠起来，武器下的子子项仍然存在。我可能会错过什么？这里的复杂之处在于，当用户单击 Combat 时，我不希望所有具有子项的子项也展开。

【问题讨论】：

标签： jquery html twitter-bootstrap accordion

【解决方案1】：

我找到了一个解决方案，虽然我不确定它是否是最好的。我试图将所有内容都塞进 tr 标记中，因为我可以重新设置其他表格标记，这些标记可能有助于根据可折叠系统的工作方式将元素组合在一起。该标签似乎是对表格元素进行分组的好方法，因为我可以拥有尽可能多的元素。在更新后的折叠表下方，该表现在将关闭该项目的所有子项。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Bootstrap Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <table id="SkillsTable" class="table table-sm">
            <tbody id="Artistic_Heading">
                <tr class="collapsed" data-toggle="collapse" data-target="#Artistic" aria-expanded="false" aria-controls="Artistic">
                    <td>Artistic</td>
                </tr>
            </tbody>

            <tbody id="Artistic" class="collapse" aria-labelledby="Artistic_Heading">
                <tr>
                    <td>
                        Painting
                    </td>
                </tr>
                <tr>
                    <td>
                        Drawing
                    </td>
                </tr>          
            </tbody>

            <tbody id="Combat_Header">
                <tr class="" data-toggle="collapse" data-target="#Combat" aria-expanded="true" aria-controls="Combat">
                    <td>Combat</td>
                </tr>
                    <a href="#" data-target="[data-parent='#child1']" data-toggle="collapse" class="my-2 float-right">toggle all</a>
            </tbody>
            <tbody id="Combat" class="collapse" aria-labelledby="Combat_Header">
                <tr id="child1" data-toggle="collapse" data-target="#Combat_Weapons" aria-controls="Combat_Weapons">
                    <td>Weapons</td>
                </tr>
                <tr class="collapse" id="Combat_Weapons" >
                    <td>One Handed Edged</td>
                </tr>
                <tr class="collapse" id="Combat_Weapons" >
                    <td>Two Handed Edged</td>
                </tr>
                <tr data-toggle="collapse" data-target="#Artistic_Missiles" aria-controls="Combat_Weapons">
                    <td>Missiles</td>
                </tr>
                <tr class="collapse" id="Artistic_Missiles">
                    <td>Bows</td>
                </tr>
                <tr class="collapse" id="Artistic_Missiles">
                    <td>Slings</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

【讨论】：