Bootstrap 导航栏不会与 Wordpress 切换答案

【问题标题】：Bootstrap Navbar won't toggle with WordpressBootstrap 导航栏不会与 Wordpress 切换
【发布时间】：2016-03-16 17:51:07
【问题描述】：

我有以下问题，我刚刚创建了一个新主题（干净），我想从 bootstrap 的基本导航栏开始。问题是当我点击它时它不会崩溃（可能是 2px）。

我没有收到关于 jQuery 版本的任何错误，或者没有找到任何 jQuery 的错误。可能是 Wordpress 本身的 jQuery 和 bootstrap 之间的冲突？？

header.php

<body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <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="#">Project name</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <?php
             wp_nav_menu( array(
                 'menu'              => 'main-menu',
                 'theme_location'    => 'main-menu',
                 '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><!--/.nav-collapse -->
            </div>
        </nav>

functions.php

/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.0.0', true );
    wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );

// add fontAwesome
function fontAwesome(){
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts', 'fontAwesome');

【问题讨论】：

标签： javascript jquery wordpress twitter-bootstrap navbar

【解决方案1】：

看来你是data-target="#navbar"，所以你必须使用参数container_id中的值是navbar

【讨论】：

【解决方案2】：

找到了解决办法！

'container_class'   => 'collapse navbar-collapse',
'container_id'      => 'bs-example-navbar-collapse-1',

这些类导致 jQuery/Boostrap 不知道要切换什么的问题，有 2 个 navbar-collapse。

【讨论】：

我的这两个类都可以正常工作，就像你拥有它的方式一样。请参阅发布的其他答案以获取正确的解决方案...您的数据目标与您的“container_id”不匹配。