Bootstrap 4 Древовидный табличный вопрос. Не удается заставить всех детей правильно закрыться - PullRequest
Новая
       28

Bootstrap 4 Древовидный табличный вопрос. Не удается заставить всех детей правильно закрыться

0 голосов
/ 19 апреля 2020

В чистом Bootstrap и Jquery я пытаюсь собрать структуру Table-Tree. То есть у вас есть таблица, которая действует как гармошка со складными рядами. Я использую элемент для хранения информации о свертывании bootstrap и 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, я не хочу, чтобы все подпункты, которые имеют подпункты, также расширялись.

1 Ответ

0 голосов
/ 19 апреля 2020

Я нашел решение, хотя я не уверен, что оно лучшее. Я пытался втиснуть все в тег 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>
...