带有子菜单的 PHP Bootstrap 4 导航菜单
原帖
我想用 Bootstrap 4 在 PHP 中创建一个导航菜单.问题是 <li>
的一个不正确(来自 dropdown
,它不会变成下拉菜单,而只是一个普通的 nav-item
).如果您想使用 <ul>
和 nav-item名为
.我该怎么做?Dropdown
的 id 2
的 上的 dropdown
我希望这是足够的信息.
这是数组():
数组(大小=3)0 =>数组(大小=5)0 =>数组(大小=3)'id' =>字符串1"(长度=1)'menu_naam' =>字符串家"(长度=4)'parent_id' =>字符串'0'(长度=1)1 =>数组(大小=3)'id' =>字符串2"(长度=1)'menu_naam' =>字符串下拉列表"(长度=4)'parent_id' =>字符串'0'(长度=1)2 =>数组(大小=3)'id' =>字符串3"(长度=1)'menu_naam' =>字符串 'Winkelwagen'(长度 = 11)'parent_id' =>字符串'0'(长度=1)3 =>数组(大小=3)'id' =>字符串4"(长度=1)'menu_naam' =>字符串联系人"(长度=7)'parent_id' =>字符串'0'(长度=1)4 =>数组(大小=3)'id' =>字符串5"(长度=1)'menu_naam' =>字符串'反馈'(长度=8)'parent_id' =>字符串'0'(长度=1)2 =>数组(大小=1)0 =>数组(大小=3)'id' =>字符串'6'(长度=1)'menu_naam' =>字符串子菜单"(长度=8)'parent_id' =>字符串2"(长度=1)6 =>数组(大小=1)0 =>数组(大小=3)'id' =>字符串7"(长度=1)'menu_naam' =>字符串子子菜单"(长度=12)'parent_id' =>字符串'6'(长度=1)
这是我用来构建菜单的 PHP:
prepare("SELECT * FROM menus");如果 ($sql->execute()) {while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {$array[$row['parent_id']][] = $row;}loop_array($array);}}函数 loop_array($array = array(), $parent_id = 0) {if (!empty($array[$parent_id])) {echo "<ul class="navbar-nav mr-auto">";foreach ($array[$parent_id] 作为 $item) {echo "";echo "<a href="#" class="nav-link">".$item['menu_naam'] ."</a>";loop_array2($array, $item['id']);echo "</li>";}echo "</ul>";}}function loop_array2($array = array(), $parent_id = 0) {if (!empty($array[$parent_id])) {echo "<li class="nav-item dropdown">";foreach ($array[$parent_id] 作为 $item) {echo "<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">".$item['menu_naam'] ."</a>";loop_array3($array, $item['id']);}echo "</li>";}}function loop_array3($array = array(), $parent_id = 0) {if (!empty($array[$parent_id])) {echo "<div class="dropdown-menu" aria-labelledby="navbarDropdown">";foreach ($array[$parent_id] 作为 $item) {echo "<a class="dropdown-item" href="#">".$item['menu_naam'] ."</a>";}回声</div>";}}
我真的希望有人能帮我解决这个问题,我应该向数据库添加一些东西,以便它知道这是一个下拉列表吗?我认为我的代码太大而且太复杂,应该有一个更简单的方法,但我不知道如何.我想我需要一种完全不同的方法.如果你能在正确的方向上帮助我,那就太好了.
还要感谢制作子菜单教程的人(在这里您还可以看到菜单是如何使用
和 构建的并完成它需要做的事情,但不适用于
bootstrap
):https://www.youtube.com/watch?v=Ol63V4R-TdI
我在这里找到了一种解决方案:Dynamic menu php bootstrap mysql
我现在拥有的是:
function drawMenu($pdo, $parent_id, $level = null) {$sql = $pdo->prepare("SELECT * FROM menus where parent_id = $parent_id");$sql->execute();foreach ($sql->fetchAll() 作为 $row) {$sql = $pdo->prepare("SELECT count(*) FROM menus where parent_id = " . $row['id'] . "");$sql->execute();//该项目是父项,所以再次递归//var_dump($sql->fetchAll()[0][0]);if($sql->fetchAll()[0][0] !=='0' && $level !== 0){echo "<li class="nav-item dropdown"><a href="" . $row['url'] . "" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">".$row['menu_naam'] ."</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
";drawMenu($pdo, $row[0], $level - 1);echo "</div></li>
";}else {//项目是叶子或者我们到达了最终级别,即基本情况,所以打印项目标签echo "<li class="nav-item"><a href="#" class="nav-link">".$row['menu_naam'] ."</a></li>
";}}}?><header class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm"><a class="navbar-brand" href="#">网上商店</a><button class="navbar-toggler" style="background: #000000" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">☰按钮><div class="navbar-collapse 折叠显示" id="navbar-header"><ul class="navbar-nav mr-auto"><?phpdrawMenu($pdo, 0, null);?></标题>
但现在的问题是它打印了多个
HTML 现在看起来像这样:
<ul class="navbar-nav mr-auto"><li class="nav-item"><a href="#" class="nav-link"><span class="fas fa-home"></span>主页</a></li><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">Dropdown</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">子菜单</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"><li class="nav-item"><a href="#" class="nav-link">Sub-sub Menu</a></li></div></li></div></li><li class="nav-item"><a href="#" class="nav-link"><span class="fas fa-shopping-cart"></span>温克尔瓦根</a></li><li class="nav-item"><a href="#" class="nav-link">联系方式</a></li><li class="nav-item"><a href="#" class="nav-link">反馈</a></li>
解决方案 我对 bootstrap 4.1 进行了一些更改