引导的移动菜单默认打开，不会关闭

我整合引导的导航栏使用Bootstrap navwalker 引导的移动菜单默认打开，不会关闭

菜单适用于桌面我的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>

来源

2017-04-06 Halnex

你有包括bootstrap JS？ – Syden

是的，它在那里。 – Halnex

我解决它通过添加缺少的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>

来源

2017-04-06 19:05:52 Halnex

引导的移动菜单默认打开，不会关闭

回答

相关问题