手机 Menu/Accordians 打不开 | Bootstrap菜单/JS

Question

我想我已经看得太久了，现在我只是在兜圈子。编程问题。

我的移动菜单上的所有手风琴都打不开；有人能指出我正确的方向吗？我尝试过替换 JS、移动 JS、移动被调用文件的顺序等

HEADER:

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title><?php wp_title(); ?></title>
        <?php wp_head(); ?>
        <link href="<?php echo get_template_directory_uri(); ?>/css/font-awesome.min.css" rel="stylesheet">
        <link href="<?php echo get_template_directory_uri(); ?>/css/animate.css" rel="stylesheet">
        <link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">    
    </head>
    <body class="container-fluid">
      <header>
        <div id="headerLogo">
          <a href="<?php echo get_site_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png"/></a>
        </div>
        <div id="darkBlue">
          <ul>
            <li><i class="fa fa-lock"></i> <a href="/members-only">Login</a></li>
            <li><i class="fa fa-phone"></i> <a href="tel:"></a></li>
          </ul>
        </div>
        <nav class="navbar navbar-expand-lg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          Menu <span class="navbar-toggler-icon"></span>
        </button>
        <?php
            wp_nav_menu( array(
                'theme_location'    => 'primary',
                '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(),
            ) );
            ?>
      </header>
      <div class="clear"></div>
        <div id="sloganWrap">
            <div id="slogan">
                <p class="lead">We Own the Boats… You Own the Memories.</p>
            </div>
        </div>

页脚


  <!--end footer-->
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->



    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo get_template_directory_uri(); ?>/js/custom-js.js"></script>
    <?php wp_footer();?>
  </body>
</html>

如果您需要完整的源代码： http://50.28.18.55/~legacyboatclub

Answer 1

它不起作用，因为 data-target='#navbarText'，但您要折叠的元素具有此 ID：#bs-example-navbar-collapse-1

所以你应该改成data-target='#bs-example-navbar-collapse-1'

手机 Menu/Accordians 打不开 | Bootstrap菜单/JS

Mobile Menu/Accordians Will Not Open | Bootstrap Menu / JS

javascript

wordpress

accordion