Question

我的bootstrap 4导航下拉列表无法正常工作。我正在使用来自https://github.com/mebishalnapit/bootstrap-navwalker的navwalker 我得到了我想要的样子。但是当我在wordpress中添加子页面时，下拉列表不起作用。

这是普通的html，它给了我正确的下拉外观。（这是我在wordpress中实现后想要的html标记）

<div id="main_display" class="container-fluid nopadding">
<header>
  <nav id="header" class="navbar fixed-top navbar-expand-lg navbar-dark bg-nav transition">
    <div id="header-container" class="container">

      <a id="brand" class="navbar-brand" href="#"><img src="images/logo_white.png" style="height:70px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Om Corax</a>

                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="nav-link dropdown-item" href="#">subpage</a>
                    <a class="nav-link dropdown-item" href="#">subpage</a>
                    <a class="nav-link dropdown-item" href="#">subpage</a>
                </div>
            </li>

这就是我的header.php wordpress文件中的菜单：

<nav id="header" class="navbar fixed-top navbar-expand-lg navbar-dark bg-nav transition">
        <div id="header-container" class="container">
            <a id="brand" class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo_white.png" style="height:90px;"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">

            <?php
            wp_nav_menu( array(
                'theme_location' => 'primary',
                'menu_id'        => 'header',
                'container'      => false,
                'depth'          => 2,
                'menu_class'     => 'navbar-nav',
                'walker'         => new Bootstrap_NavWalker(),
                'fallback_cb'    => 'Bootstrap_NavWalker::fallback',
            ) );
            ?>

猜测它在这里搞砸了，而不是100％放在wp_nav_menu数组中。谁可以帮助我？

Answer 1

如果您正确地在functions.php中添加了js文件（通过wp_enqueue_script），但仍然无法正常工作，请尝试删除以下div：

<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">

Same issue

Answer 2

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<button class="navbar-toggler" type="button" 
data-toggle="collapse" 
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" 
aria-expanded="false" 
aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
</button>

<?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'navbarSupportedContent',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
 ?>


</nav>

Bootstrap 4 wordpress navwalker下拉列表无法正常工作

2 个答案: