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

Question

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

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

Самый высокий уровень 1-й уровень у которого есть Уровень 2 ниже уровня 2 Уровень 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>

0

bootstrap-4 dropdown laravel panel php

Решение

По вопросам рекламы [email protected]

Accepted Answer

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

Заменить 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>

0

Другие решения

Других решений пока нет …

Источник