Bootstrap Navbar 不会与 Wordpress 切换

Bootstrap Navbar won't toggle with Wordpress

本文关键字：Wordpress 切换 Navbar Bootstrap      更新时间：2023-09-26

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

我没有收到任何关于jQuery版本的错误或找不到任何jQuery的错误。也许来自Wordpress本身的jQuery和bootstrap之间的冲突？

标题.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>

函数.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');

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

找到了解决方案！

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

这些类导致了一个问题，jQuery/Boostrap不知道要切换什么，有2个导航栏折叠。

相关文章：