Bootstrap 4 WP Navwalker 多级下拉菜单

Question

基本上，我正在尝试将 WP Navwalker 下拉菜单设置为三个级别，而不是默认的 2 个级别。

我找到了这方面的教程，但它们似乎是针对 Bootstrap 3 的，因为我没有 .dropdown-submenu class .

这是我尝试做的一个例子，但这对我不起作用（我猜是因为我没有 .dropdown-submenu class)

https://joeybabcock.me/blog/html/bootstrap-multi-level-dropdown-menus-in-wordpress/

<div class="container header_primary py-4 fw-c">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-6 d-flex align-items-center">
            <a href="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo-black.png" alt=""></a>
        </div><!-- .site-branding -->

        <div class="col-lg-8 col-md-8 col-sm-6 col-6 header_navigation justify-content-end align-items-center">
            <nav class="primary_style navbar navbar-expand-lg navbar-expand-md navbar-light float-md-right d-md-flex d-block">
                <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#bs4navbar1" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                 <?php
                 wp_nav_menu([
                     'menu'            => 'main-nav',
                     'theme_location'  => 'top',
                     'container'       => 'div',
                     'container_id'    => 'bs4navbar',
                     'container_class' => 'collapse navbar-collapse',
                     'menu_id'         => false,
                     'menu_class'      => 'navbar-nav',
                     'depth'           => 3,
                     'fallback_cb'     => 'bs4navwalker::fallback',
                     'walker'          => new bs4navwalker()
                 ]);
                 ?>
            </nav>
        </div>
    </div>

Answer 1

对于 bootstrap 4 和 wp-bootstrap-navwalker... https://joeybabcock.me/blog/html/bootstrap-multi-level-dropdown-menus-in-wordpress/

这实际上对我来说非常有效

我从未使用过 bs4navwalker，但我认为这会导致您的问题。

我正在使用的其他一些东西是 Roots Bedrock framework, with a Roots sage theme。工作起来很有魅力。这是我把所有东西都放在我的圣人主题上的地方：

/resources/views/header.blade.php 替换菜单功能

{{ wp_nav_menu(['theme_location' => 'primary_navigation',
'depth'           => 3, // 1 = no dropdowns, 2 = with dropdowns, 3 = multilevel dropdowns
'container'       => 'div',
'container_class' => 'justify-content-end',
'container_id'    => 'bs-navbar-collapse-1',
'menu_class'      => 'nav navbar-nav text-capitalize',
'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
'walker'          => new WP_Bootstrap_Navwalker(),]) }}

/resources/assets/styles/layouts/_menus.scss 在最底部

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0; left: 95%; margin-top: -1px;
}
@media (max-width: 992px)
{
    .dropdown-menu {
        padding: .5rem 0;
        margin: .125rem 0 0;
    }
    li > ul > li > ul > li > .dropdown-item {
        padding: .25rem 3rem;
    }
    li > ul > li > ul > li > .dropdown-item:before {
        content: '• ';
    }
}

/resources/assets/scripts/routes/common.js 在“init()”函数中

$('.dropdown-menu > li > .dropdown-menu').parent().addClass('dropdown-submenu').find(' > .dropdown-item').attr('href', 'javascript:;').addClass('dropdown-toggle');
$('.dropdown-submenu > a').on("click", function(e) {
  var dropdown = $(this).parent().find(' > .show');
  $('.dropdown-submenu .dropdown-menu').not(dropdown).removeClass('show');
  $(this).next('.dropdown-menu').toggleClass('show');
  e.stopPropagation();
});
$('.dropdown').on("hidden.bs.dropdown", function() {
  $('.dropdown-menu.show').removeClass('show');
});

Bootstrap 4 WP Navwalker 多级下拉菜单

Bootstrap 4 WP Navwalker Multi-Level Dropdown

wordpress

bootstrap-4

wp-nav-walker