使用 Bootstrap 4 列表组面板显示一些动态数据时出现问题

Question

我正在使用 Bootstrap 4 构建用户界面。我有一些动态数据，我需要在 list-group-items 中显示为下拉列表。数据看起来像一个树状结构。

最高级别为Level 1，其下有Level 2，Level 2 下有Level 3。所有关卡都在 PHP Laravel 刀片文件中动态填充。

我想实现一个功能，即当用户单击级别 1 时，它下面的级别应该打开，单击级别 2 后，级别 3 应该打开。

我尝试使用 bootstrap 4，但 U.I 未对齐..

动态填充的 U.I 引导列表组类

<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>