Bootstrap导航切换器未关闭Wordpress中的菜单

Question

我目前正在将我的静态网站转移到WordPress中。

我的引导菜单中的链接可以正常工作。汉堡菜单动画也可以正常工作，因此这告诉我JQuery在WordPress中工作正常。

但是，当我单击它时，汉堡菜单不会关闭。有人对此有答案吗？

HTML代码：

<header id="header"> <!-- Start of header --> 
  <nav class="navbar navbar-expand-lg text-center navbar-light"> <!--   Sart of navigation --->
     <a class="navbar-brand" href="home.html"></a>

        <!-- Toggler -->
        <button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent20"
          aria-controls="navbarSupportedContent20" aria-expanded="false" aria-label="Toggle navigation">
          <div class="animated-icon1"><span></span><span></span><span></span></div>
        </button>

        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent20">

          <!-- Links -->
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.html">HOME</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="portfolio.html">PORTFOLIO</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about-me.html">ABOUT ME</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CONTACT</a>
            </li>
          </ul>
          
        </div> <!-- End of collapsible content --->

      </nav> <!-- End of navigation --->
  </header> <!-- End of header --->

PHP代码：

  <header id="header" class="site-header navbar-static-top <?php echo wp_bootstrap_starter_bg_class(); ?>" role="banner">
    <div class="container">
        <nav class="navbar navbar-expand-xl p-0 navbar-expand-lg text-center navbar-light">
            <a class="navbar-brand"></a>
                <?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?>
                    <a href="<?php echo esc_url( home_url( '/' )); ?>">
                        <img src="<?php echo esc_url(get_theme_mod( 'wp_bootstrap_starter_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; ?>

            <!-- Toggler -->

            <button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">
                <div class="animated-icon1"><span></span><span></span><span></span></div>
            </button>

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

        </nav>
    </div>
</header><!-- #masthead -->