Bootstrap在Wordpress中的移动菜单默认打开，不会关闭

Question

我正在使用Bootstrap navwalker将Bootstrap的导航栏集成到我的Wordpress自定义模板中

该菜单适用于桌面，但是当我将浏览器大小调整为移动视图时，默认情况下会打开移动菜单，单击栏图标不会执行任何操作。

我的app.js中没有任何干扰导航栏的内容。

编辑 我刚刚注意到 HTML 输出中缺少ul菜单的父div <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">。

<nav class="navbar navbar-default">
    <div class="container" id="main-menu">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BRAND</a>
        </div>
        <?php
        wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 4,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav navbar-left',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
        ); ?>
    </div>
</nav>

菜单的 HTML 输出如下，缺少ul的父div

<nav class="navbar navbar-default">
    <div class="container" id="main-menu">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BRAND</a>
        </div>
        <ul id="menu-main" class="nav navbar-nav navbar-left">
             <li class="active menu- active"><a href="http://localhost/technia/"><i class="fa fa-home"></i></a></li>
             <li class="menu-science dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Science <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                         <li class="menu-tech"><a title="Tech" href="http://localhost/technia/category/tech/">Tech</a></li>
                  </ul>
             </li>
             <li class="menu-vr"><a title="VR" href="http://localhost/technia/category/vr/">VR</a></li>
             <li class="menu-physics"><a title="Physics" href="http://localhost/technia/category/physics/">Physics</a></li>
             <li class="menu-medicine"><a title="Medicine" href="http://localhost/technia/category/medicine/">Medicine</a></li>
        </ul>       
   </div>
</nav>

Answer 1

我通过手动添加缺少的div 解决了它

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <?php
            wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                    'walker'            => new WP_Bootstrap_Navwalker())
            ); ?>
</div>