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

Question

将 Bootstrap 的导航栏集成到我的 Wordpress 自定义模板中

菜单在桌面上有效，但当我将浏览器调整为移动视图时，移动菜单默认打开并且点击条形图标没有任何作用。

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

EDIT 我刚刚注意到 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>

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

Bootstrap's mobile menu in Wordpress is opened by default and doesn't close

html

wordpress

twitter-bootstrap

wp-nav-walker