Bootstrap响应式导航按钮不起作用答案

【问题标题】：Bootstrap responsive nav button not workingBootstrap响应式导航按钮不起作用
【发布时间】：2018-10-13 21:42:03
【问题描述】：

我尝试了无数线程，但在将引导导航菜单转换为手机/平板电脑的 wordpress 主题时无法下拉菜单。

我的导航代码是

<nav class="navbar navbar-expand-md navbar-dark bg fixed-top logo">

      <a class="navbar-brand" href="index.html"><img src="<?php bloginfo(template_directory); ?>/resources/images/Logo-blue-copy.png" ></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
<?php
      wp_nav_menu( array(
  'theme_location'  => 'primary',
  'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
  'container'       => 'div',
  'container_class' => 'collapse navbar-collapse',
  'container_id'    => 'bs-example-navbar-collapse-1',
  'menu_class'      => 'navbar-nav mr-auto',
  'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
  'walker'          => new WP_Bootstrap_Navwalker(),
) );



?>      
    </nav>

我的引导 CDN 中的 jquery 当前位于页脚中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

我的函数文件包含

 <?php register_nav_menus( $locations ); 

// Register Custom Navigation Walker
 require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

wp_register_script( 'jQuery', "https://code.jquery.com/jquery-3.2.1.slim.min.js", null, null, true );
wp_enqueue_script('jQuery');

wp_register_script( 'jQuery', "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js", null, null, true );
wp_enqueue_script('jQuery');

wp_register_script( 'jQuery', "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js", null, null, true );
wp_enqueue_script('jQuery');


?>

<?php register_nav_menus( $locations ); 

// Register Custom Navigation Walker
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

?>

一些帮助会很棒。谢谢。

【问题讨论】：

“我的引导 CDN 中的 jquery 目前在页脚中..” .. 我没有看到 jQuery
应该添加这个

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

也许你必须使用 'walker'=> new WP_Bootstrap_Navwalker() 不带逗号

  <?php
  wp_nav_menu( array(
  'theme_location'  => 'primary',
  'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
  'container'       => 'div',
  'container_class' => 'collapse navbar-collapse',
  'container_id'    => 'bs-example-navbar-collapse-1',
  'menu_class'      => 'navbar-nav mr-auto',
  'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
  'walker'          => new WP_Bootstrap_Navwalker()
) );

【讨论】：

我认为问题在于注册脚本以使 jquery 进行下拉，菜单工作正常并且显示汉堡包只是没有下拉。
嗯，您可以尝试在您的页脚或您想使用的任何地方使用 CDN，而无需在您的 function.php 中进行请求

【解决方案2】：

我怀疑过 - 问题出在

'container_id' => 'navbarsExampleDefault',（在 header.php 文件中）

在使用开发工具检查站点的静态版本后，按照上述设置进行修复。

【讨论】：