php - 使用 Bootstrap 4 列表组面板显示一些动态数据时出现问题
问题描述
我正在使用 Bootstrap 4 构建用户界面。我有一些动态数据,我需要在 list-group-items 中显示为下拉列表。数据看起来像一个树状结构。
最高级别是1级,低于 2 级,2级低于 3 级。所有级别都在 PHP Laravel 刀片文件中动态填充。
我想实现一个功能,当用户单击级别 1 时,它下面的级别应该打开,单击级别 2 后,级别 3 应该打开。
我尝试使用引导程序 4,但 UI 未对齐..
动态填充的 UI 引导列表组类
<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>
解决方案
我建议您可以在这里更新两个主要内容:
- 将
div
标签替换为ul
或li
作为 Bootstraplist-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>
推荐阅读
- machine-learning - 为什么实际使用 theta*X 而不是 theta'*X?
- jquery - 如何将参数添加到post方法的ajax调用中
- c - 为什么 Windows 上的 MinGW 不需要静态链接?
- actionscript-3 - 在 Adobe Animate 中从矢量保存高分辨率位图
- batch-file - XCOPY 命令在 Windows XP 批处理文件中有效,但在 Windows 7 Pro 批处理文件中无效
- reactjs - 当 url 匹配相同的路由时,React 路由器不会重新加载页面
- python - 当浏览器给出 404 时,python 库中的请求模块给出的状态代码为 200
- entity-framework-6 - EF6 先查询内存使用情况
- java - 具有列表参数内容的 Mockito 模拟对象
- reactjs - 制服:创建自定义字段