我在boostrap 4下的动态响应菜单不起作用。
我在第2级被阻止。带下拉列表的子菜单不起作用
我的代码：http://www.bootply.com/vtv1oTt9mS
<div class="headerLine"></div>
<div class="backgroundSuperfish">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<ul class="nav navbar-nav">
<?php
// level 1
foreach($menu_parent as $key => $menus) {
if ($menus['link'] != '') {
echo '<li class="nav-item"><a class="nav-link" href="'. OSCOM::link($menus['link']) . '">' . $menus['label'] . '</a></li>';
} else {
echo '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' . $menus['label'] . '</a>';
}
// level 2
if (!is_null($menus['sub_menu'])) {
echo '<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">';
foreach($menus['sub_menu'] as $second_level) {
if ($menu_sub[$second_level]['link'] != '') {
echo '<a class="dropdown-item" href="'. OSCOM::link($menu_sub[$second_level]['link']) . '">' . $menu_sub[$second_level]['label'] . '</a>';
} else {
echo '<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' . $menu_sub[$second_level]['label'] . '</a>';
}
}
// level 3
if ($menu_sub[$second_level]['sub_menu'] != '') {
echo '<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">';
foreach($menu_sub[$second_level]['sub_menu'] as $third_level) {
if (!is_null($menu_sub[$third_level]['link'])) {
echo '<a class="dropdown-item" href="'. OSCOM::link($menu_sub[$second_level]['link']) . '">' . $menu_sub[$third_level]['label'] . '</a>';
} else {
echo '<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' . $menu_sub[$third_level]['label'] . '</a>';
}
}
// level 4
if ($menu_sub[ $third_level ]['sub_menu'] != '') {
echo '<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">';
foreach($menu_sub[ $third_level ]['sub_menu'] as $fourth_level) {
if (!is_null($menu_sub[$fourth_level]['link'])) {
echo '<a class="dropdown-item" href="'. OSCOM::link($menu_sub[$second_level]['link']) . '">' . $menu_sub[$fourth_level]['label'] . '</a>';
} else {
echo '<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' . $menu_sub[$fourth_level]['label'] . '</a>';
}
}
echo '</div>';
} // end level 4
echo '</div>';
} // end level 3
echo '</div>';
} // end level 2
echo '</li>';
}
?>
</ul>
</div>
</nav>
</div>
<div class="clearfix"></div>
生成HTML：
<div class="">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="index.php">Back Office</a>
<a class="dropdown-item" href="../index.php">Store</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Configuration</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">My store</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">My backoffice</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Customers B2C</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Customers B2B</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Modules</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SEO / Social networking</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Location & taxes</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Others</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sessions & cache</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="">Cache Control</a>
<a class="dropdown-item" href="">gzip compression</a>
<a class="dropdown-item" href="">Logging</a>
<a class="dropdown-item" href="">Sessions</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Catalog</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="categories.php">Categories</a>
<a class="dropdown-item" href="products.php">Products</a>
<a class="dropdown-item" href="quick_updates.php">Quick update</a>
<a class="dropdown-item" href="products_attributes.php">Product attributs</a>
<a class="dropdown-item" href="products_extra_fields.php">Products extra fields</a>
<a class="dropdown-item" href="manufacturers.php">Brands</a>
<a class="dropdown-item" href="suppliers.php">Suppliers</a>
<a class="dropdown-item" href="products_archive.php">Products archive</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Customers</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="orders.php">Orders</a>
<a class="dropdown-item" href="customers.php">Customers</a>
<a class="dropdown-item" href="members.php">B2B customers pending</a>
<a class="dropdown-item" href="customers_groups.php">Customers group</a>
<a class="dropdown-item" href="reviews.php">Reviews</a>
<a class="dropdown-item" href="customers_feedback.php">Customers feedback</a>
<a class="dropdown-item" href="mail.php">Customer contact</a>
<a class="dropdown-item" href="contact_customers.php">Customers contact support</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Marketing</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="specials.php">Specials</a>
<a class="dropdown-item" href="discount_coupons.php">Discount coupons</a>
<a class="dropdown-item" href="products_favorites.php">Favorites</a>
<a class="dropdown-item" href="products_featured.php">Featured product</a>
<a class="dropdown-item" href="products_related.php">Cross sell & related products</a>
<a class="dropdown-item" href="banner_manager.php">Banner management</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Communication</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="newsletters.php">Newsletter</a>
<a class="dropdown-item" href="page_manager.php">Pages management</a>
<a class="dropdown-item" href="blog_categories.php">Blog categories</a>
<a class="dropdown-item" href="blog_content.php">Blog content</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reports</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products Statistics</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Financial statistics</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products management</a>
<a class="dropdown-item" href="stats_suppliers.php">Orders suppliers</a>
<a class="dropdown-item" href="stats_pool_customers.php">Pool customers</a>
<a class="dropdown-item" href="stats_newsletter_no_account.php">Anonymous subscription</a>
<a class="dropdown-item" href="stats_email_validation.php">Email analysis</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Design</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Design Configuration</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products listing</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Store index & categories</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Customers Account</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Order process</a>
<a class="dropdown-item" href="modules.php?set=modules_products_info">Products description</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Communication</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Miscellaneous</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Layout</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="">Left & right boxes</a>
<a class="dropdown-item" href="">Site header</a>
<a class="dropdown-item" href="">Site footer</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tools</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<a class="dropdown-item" href="backup.php">Database backup</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Upgrade / Add ons</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">HTML editor</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Datas export</a>
<a class="nav-link dropdown-toggle" href="#" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Security informations</a>
<a class="dropdown-item" href="whos_online.php">Who's Online</a>
</div>
</li>
</div>
</nav>