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

问题描述 投票：0回答：1

在纯Bootstrap和Jquery中，我试图将Table-Tree结构放在一起。就是说，您有一张桌子，它的行为就像可折叠行的手风琴。我正在使用该元素来保存我的折叠引导程序和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>

问题是，当我在一个子项目中有一个子项目时，按照页面上的示例，当您单击“战斗”然后单击“武器”时，您会看到一个列表。再次单击“战斗”，我希望所有处于战斗状态的物品都崩溃。我的并没有使一切崩溃，武器下的子项目仍然存在。我可能会想念什么？这里的复杂之处在于，当用户单击“战斗”时，我不希望所有具有子项目的子项目也都展开。

jquery html twitter-bootstrap accordion
1个回答
0
投票

我找到了一个解决方案，尽管我不确定这是否是最好的解决方案。当我可以重新构造其他表标签时，我试图将所有内容都填充到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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.