Question

我在index.html中有一个导航，该导航基本上是从我以前建立的可以复制的站点中复制的，但是当我单击汉堡包时，没有任何显示，甚至没有更改为汉堡包的关闭状态。这是我的导航代码。

<nav class="navbar navbar-default navbar-expand-lg navbar-light navcolor-height nav-font-size" style="background-color: #d58e8db0;">
    <div class="container">
        <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <img src="<?php  bloginfo('template_url');  ?>/assets/images/keddingtonhouselogo.png" alt="Logo">
       </a>

       <button class="hamburger hamburger--spring" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="hamburger-box">
                      <span class="hamburger-inner"></span>
                    </span>
                  </button>

        <div class="collapse navbar-collapse flex-column align-items-end rem-1p2" id="navbarCollapse">
            <!-- navbar1 -->
            <div class="navbar-nav mb-lg-0 topnavbar">
                <img src="<?php  bloginfo('template_url');  ?>/assets/images/phone-icon.png" class="margin-top-9">
                <a class="nav-item nav-link" href="tel:+441507603973">01507 603973</a>
                <img src="<?php  bloginfo('template_url');  ?>/assets/images/email-icon.png" class=" margin-left-10 margin-top-9">
                <a class="nav-item nav-link" href="mailto:info@keddingtonhouse.co.uk">info@keddingtonhouse.co.uk</a>
            </div>

            <!-- navbar2 -->
            <ul class="navbar-nav mt-0 ">
                <li class="nav-item active">
                    <a class="nav-link" href="<?php echo esc_url( home_url( '/' ) ); ?>">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url( home_url( '/facilities' ) ); ?>">Facilities</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url( home_url( '/directions' ) ); ?>">Directions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url( home_url( '/photos' ) ); ?>">Photos </a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="<?php echo esc_url( home_url( 'bookings' ) ); ?>">Bookings</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

我什至没有尝试将NavWalker用于Wordpress。如果有人可以解决这个问题，那就太好了

更新：我在控制台中的错误

更新2：这是我的Functions.php

function use_these_scripts()
{
//JavaScript Scripts
wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/assets/js/slick.js', array(), true ); //Slick.JS
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/plugins/bootstrap/js/bootstrap.min.js', array(), true ); //Bootstrap Minify.JS
wp_enqueue_script( 'jQuery-js', get_template_directory_uri() . '/assets/js/jquery.min.js', array(), true );
wp_enqueue_script( 'Popper-js', get_template_directory_uri() . '/assets/js/Popper.min.js', array(), true );
//echo "JS Call Testing";
 }

 add_action('wp_enqueue_scripts', 'use_these_scripts');


 function OurCSS()
 { 
wp_enqueue_style( 'slickcss', get_stylesheet_directory_uri() . '/assets/css/slick.css' );
wp_enqueue_style( 'slick-theme-css', get_stylesheet_directory_uri() . '/assets/css/slick-theme.css' );
wp_enqueue_style('font-awesome', 'https://use.fontawesome.com/releases/v5.0.1/css/all.css');
wp_enqueue_style( 'hamburger_css', get_stylesheet_directory_uri() . '/assets/css/hamburger.min.css' );
wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '/assets/plugins/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() . '/assets/css/KeddingtonHouse.css' );

//echo "CSS Call Testing";
}

add_action( 'wp_enqueue_scripts', 'OurCSS' );

Answer 1

在</head>标记之前添加JQuery，并在JQuery之后添加bootstrap.js

Bootstrap 4移动导航无法打开

1 个答案: