Question

我需要有关Wordpress中导航栏切换折叠（引导程序4）的帮助。

我不明白为什么在平板电脑或智能手机中分辨率，导航栏切换折叠无效。

JS，jQuery和CSS正常工作，如果我完全更改HTML代码，一切都将正常工作。

我的HTML代码有问题，但我找不到错误。

能请你帮我吗？

header.php

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">

                <?php if ( get_theme_mod( 'm1_logo' ) ): ?>

                    <a href="<?php echo esc_url( home_url( '/' )); ?>" class="navbar-brand">
                        <img src="<?php echo esc_attr(get_theme_mod( 'm1_logo' )); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                    </a>

                <?php else : ?>
                    <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
                <?php endif; ?>
                
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <?php
                wp_nav_menu( array(
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse justify-content-end',
                    'container_id'      => 'navbarCollapse"',
                    'menu_id'           => false,
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                    'walker'            => new WP_Bootstrap_Navwalker(),
                ) );
                ?>
        </nav>

function.php

<?php 

function lapizzeria_styles() {
    // Adding stylesheets
    wp_register_style('bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css', array(), false, 'all');
    wp_register_style('normalize', get_template_directory_uri() . '/css/normalize.css', array(), '8.0.1');
    wp_register_style('style', get_template_directory_uri() . '/style.css', array('normalize'), false, 'all');
    // Enqueue the style
    wp_enqueue_style('bootstrap-style');
    wp_enqueue_style('normalize');
    wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'lapizzeria_styles');

function load_jquery() {
    // Adding stylesheets
    wp_deregister_script('jquery');
    wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-3.3.1.min.js', '', 1, 'true');
    // Enqueue the style
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'load_jquery');

function bootstrap()
{
    wp_enqueue_script( 'bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
    wp_enqueue_script( 'bootstrap-min', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );

    // Enqueue the style
    wp_enqueue_style('bootstrap-js');
    wp_enqueue_style('bootstrap-min');

}
add_action( 'wp_enqueue_scripts', 'bootstrap' );


// Register Custom Navigation Walker
register_nav_menus( array(
    'primary' => __( 'Primary', 'lapizzeria' ),
    'footer' => __( 'Footer', 'lapizzeria' ),
) );
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';


/**
 * Customizer additions.
 */
require get_template_directory() . '/inc/customizer.php';

Bootstrap 4 / Wordpress-导航栏折叠不起作用

0 个答案: