Bootstrap navbar dropdown link does not work when bootstrap.min.js is in the code

问题

I am new to this so please bear with me. I copied this navbar code from Bootstrap and tweaked it to fit my code.

I have a dropdown list with three dropdown items. I want the user to have two options. They can go to the portfolio page and find the links there or they can use the dropdown menu.

The link to the portfolio page does not work when the last script that contains bootstrap.min.js is in the code. Not sure why this is not working. If I take out the dropdown and make it a regular link it goes to the portfolio page. Here is my code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel ="stylesheet" type="text/css" href="style.css">
    <title>Do You Know Jennipher</title>

  </head>
  <nav class="navbar sticky-top navbar-expand-lg">
    <a class="navbar-brand" href="index.html">Do You Know Jennipher</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="aboutme.html">About Me</a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>

          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
            <a class="dropdown-item" href="previous_work.html">Movie Madness</a>
            <a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="gallery.html">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="say_hello.html">Say Hello</a>
        </li>
      </ul>

    </div>
  </nav>
  <header>
    <div class="flex-container">
      <img src="images/banner_ad.jpg" class="banner" alt="banner ad"> 
    </div>
  </header> 
  <body>
    <section class="intro">
      <div class="container">

        <div class="row">
          <div class="col-6">
            <img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
          </div>
          <div class="col-6">
            <p class="intro-text">Hello, my name is Jennipher </p>
          </div>
        </div>
      </div>

    </section>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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>

  </body>
  <footer>
    <p class="footer">&#169; Copyright 2019 Jennipher Samms</p>
  </footer>
</html>

回答1:

There's nothing wrong with min.js library. Only you should follow perfect body layout and syntax. It's better to always keep your <script> files before </body> tag ends. End you forgot write some elements inside the body instead you wrote them outside body tag. I just adjusted some of your code. Check it once.

<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel ="stylesheet" type="text/css" href="style.css">
<title>Do You Know Jennipher</title>

</head>
<body>
        <nav class="navbar sticky-top navbar-expand-lg">
            <a class="navbar-brand" href="index.html">Do You Know Jennipher</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="aboutme.html">About Me</a>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>

                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
                    <a class="dropdown-item" href="previous_work.html">Movie Madness</a>
                    <a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
                </div>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="gallery.html">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="say_hello.html">Say Hello</a>
                </li>
            </ul>

        </div>
        </nav>
    <header>
        <div class="flex-container">
            <img src="images/banner_ad.jpg" class="banner" alt="banner ad"> 
        </div>
    </header> 

<section class="intro">
        <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
            </div>
            <div class="col-md-6">
                <p class="intro-text">Hello, my name is Jennipher </p>
            </div>
        </div>
        </div>

</section>
<footer>
    <p class="footer text-center">&#169; Copyright 2019 Jennipher Samms</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

For better practice please go through this link

来源：https://stackoverflow.com/questions/55083477/bootstrap-navbar-dropdown-link-does-not-work-when-bootstrap-min-js-is-in-the-cod

标签

javascript

html

css

bootstrap-4