Неполадка при отображении некоторых динамических данных с помощью панели списка групп Bootstrap 4

Question

Я работаю над сборкой пользовательского интерфейса с использованием Bootstrap 4. У меня есть некоторые динамические данные, которые мне нужно отобразить в элементах списка групп в виде раскрывающегося списка.Данные выглядят как древовидная структура.

Самый высокий уровень - Уровень 1 , под которым Уровень 2 , уровень 2 - уровень 3 ниже.Все уровни динамически заполняются в блейд-файле PHP Laravel.

Я хочу добиться функциональности, при которой, когда пользователь нажимает уровень 1, уровни ниже должны открываться после нажатия уровня 2, уровень 3 должен открываться.

Я попытался использовать загрузчик 4, но пользовательский интерфейс не выровнен ..

Класс группы загрузочного списка пользовательского интерфейса, который заполняется динамически

<div id="MainMenu">
    <div class="list-group panel">
       <!-- Level 1-->
       @foreach($asm as $a)
      <a href="#demo3" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu" style="color: #868ba1;"> ASM ID : {{ $a['id'] }} <i class="fa fa-caret-down"></i></a>
        @endforeach
       <div class="collapse" id="demo3">

            <!--Level 2 -->
            @foreach($usm as $u)
            <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1"> USM ID : {{ $u['id'] }} <i class="fa fa-caret-down"></i></a>
             @endforeach

            <!--Level 3-->
            <div class="collapse list-group-submenu" id="SubMenu1">
              @foreach($ag as $Agt)
                <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1"> Agent : {{ $Agt['agent_no'] }}<i class="fa fa-caret-down"></i></a>
              @endforeach
            </div>
       </div>
    </div>
</div>

Answer 1

Я предлагаю вам обновить две основные вещи здесь:

• Заменить теги div на ul или li, как Bootstrap делает для list-group в своей документации
• Переименование идентификаторов с помощью чего-то более удобочитаемого, что позволяет добавлять динамические индексы

$(document).ready(function() {

  $('[id^="level-1"]').on('shown.bs.collapse', function(e) {
    if ($(this).is(e.target)) { // Prevent other divs react to the expansion
      $(this).parent().addClass('list-group-item-primary');
    }
  }).on('hidden.bs.collapse', function (e) {
    if ($(this).is(e.target)) {
      $(this).parent().removeClass('list-group-item-primary');
    }
  });

});

body { padding : 1em; }

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="MainMenu">
  <!-- Level 1 -->
  <ul class="list-group">
    <!-- @foreach($asm as $a) -->
    <li class="list-group-item">
      <a href="#level-1-item-1" data-toggle="collapse" data-parent="#MainMenu"> ASM ID : 1 <!-- {{ $a['id'] }} --><i class="fa fa-caret-down"></i></a>
      <!-- Level 2 -->
      <ul class="list-group collapse" id="level-1-item-1">
        <!-- @foreach($usm as $u) -->
        <li class="list-group-item">
          <a href="#level-2-item-1" data-toggle="collapse" data-parent="#level-1-item-1"> USM ID : 2 <!-- {{ $u['id'] }} --><i class="fa fa-caret-down"></i></a>
          <!-- Level 3 -->
          <ul class="list-group collapse" id="level-2-item-1">
            <!-- @foreach($ag as $Agt) -->
            <li class="list-group-item">
              <a href="#level-3-item-1" data-toggle="collapse" data-parent="#level-2-item-1"> Agent : 3 <!-- {{ $Agt['agent_no'] }} --><i class="fa fa-caret-down"></i></a>
            </li>
            <!-- @endforeach -->
          </ul> <!-- Level 3 -->
        </li>
        <!-- @endforeach --> 
      </ul> <!-- Level 2 -->
    </li>
    <!-- @endforeach -->
  </ul> <!-- Level 1 -->
</div>