jquery - 引导折叠功能似乎在这里不起作用。有什么我看不到的吗？

问题描述

我正在尝试制作一个在窗口很小时会折叠的导航栏，但是应该显示菜单的按钮不会这样做。简而言之，折叠按钮不起作用。它应该显示一个下拉菜单，但它没有。

控制台中没有错误，我验证了 jQuery 链接在正确的位置。我在浏览器中检查了 js 插件，并且 jQuery 也适用于其他事情。我对此很陌生，所以我也会感谢任何评论。

编辑：


    <nav class="navbar sticky-top navbar-expand-sm navbar-dark bg-dark" id="navbar">
        <a class="navbar-brand" href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item ">
              <a class="nav-link" href="#jumbotron-picture">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About Me</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#portfolio">My Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact-div">Contact</a>
            </li>
          </ul>
        </div>

      </nav>

这就是我所包含的

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

还有我的 jQuery：

<script type="text/javascript">
    // navbar fade-in 
    $(document).ready(function() {

      // hide .navbar first
      $(".navbar").hide();

      // fade in .navbar
      $(function() {
        $(window).scroll(function() {

          // set distance user needs to scroll before we start fadeIn
            var hT = $('#about').offset().top,
            hH = $('#about').outerHeight(),
            wH = $(window).height(),
            wS = $(this).scrollTop();  

        if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
            $('.navbar').fadeIn();

          }         
        });
      });

    });

    //View my work button
    $(document).ready(function() {
      $(".down").click(function() {
        $('html, body').animate({
          scrollTop: $("#about").offset().top
        }, 900);
      });
    });

这是我的CSS：

<style type="text/css">
    body {
      font-family: 'Open Sans', serif;
      position: relative;

    }



    .jumbotron {
      width: 100wh;
      height: 100vh;
      color: #fff;
      background: rgb(70, 16, 140);
      background: linear-gradient(120deg, rgba(70, 16, 140, 1) 0%, rgba(78, 23, 145, 1) 10%, rgba(76, 33, 134, 1) 18%, rgba(106, 68, 156, 1) 26%, rgba(91, 45, 149, 1) 34%, rgba(106, 64, 159, 1) 39%, rgba(90, 33, 162, 1) 48%, rgba(107, 60, 166, 1) 55%, rgba(100, 39, 176, 1) 62%, rgba(102, 58, 159, 1) 69%, rgba(99, 36, 179, 1) 79%, rgba(85, 36, 149, 1) 85%, rgba(106, 75, 145, 1) 95%, rgba(79, 15, 161, 1) 100%);

      background-size: 400% 400%;
      -webkit-animation: Gradient 10s ease infinite;
      -moz-animation: Gradient 10s ease infinite;
      animation: Gradient 10s ease infinite;
      margin: 0;
    }

    @-webkit-keyframes Gradient {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    @-moz-keyframes Gradient {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    @keyframes Gradient {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    span {
      font-weight: bold;
      color: #EBD727;

    }


    .jumbotron h1 {

      align-content: center;

    }

    #jumb-text {

      text-align: center;
      position: relative;
      top: 200px;




    }

    #myPicture {


      margin-top: 50px;
      margin-left: auto;
      margin-right: auto;
      display: block;
      border-radius: 50%;



    }

    #about-text {


      text-align: center;
      color: #343A40;
      border-bottom: 3px solid #EBD727;
      width: 200px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 100px;


    }

    #about-background {

      width: 71%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 70px;
    }

    .navbar {

      height: 50px;
      border-bottom: 4px solid #EBD727;



    }

    #portfolio {

      background-color: #F5F5F5;

    padding: 10px 30px 50px 30px;


    }

    #portfolio-text {

      text-align: center;
      color: #343A40;
      border-bottom: 3px solid #EBD727;
      width: 230px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 70px;
      padding-top: 50px;

    }


    #img-laser {
      max-width: 47%;


      height: auto;
      margin: auto;

    }

    #img-maze {

      max-width: 100%;
      height: auto;
      margin: 0 auto;

    }

    #card-id {

      background-color: #F5F5F5;
      border: none;

    }

    .contact-div {
      padding-top: 100px;
      padding-bottom: 50px;
      background-color: #252934;
      color: #FEFEFE;

    }

    #email,
    #subject,
    #textarea {

      background-color: #1E242C;

    }

    #view {

      text-align: center;
      position: relative;
      top: 200px;


    }

    #button {

      height: 50px;
      width: 150px;
      transition: all 0.4s;
      background-color: transparent;
      color: #F5F5F5;

    }

    #button:hover {

      background-color: #EBD727;
      color: #343A40;

    }

    #first {

      width: 50%;



    }

    .nav-item > .active a{

      color:#EBD727 !important;

    }

标签： jquerybootstrap-4

jquery - 引导折叠功能似乎在这里不起作用。有什么我看不到的吗？

问题描述

解决方案

推荐阅读