【问题标题】:Bootstrap navbar dropdown link does not work when bootstrap.min.js is in the code当 bootstrap.min.js 在代码中时,Bootstrap 导航栏下拉链接不起作用
【发布时间】:2019-03-10 00:52:58
【问题描述】:

我是新手,所以请多多包涵。我从 Bootstrap 复制了这个导航栏代码,并对其进行了调整以适合我的代码。

我有一个包含三个下拉项目的下拉列表。我希望用户有两个选择。他们可以转到投资组合页面并在那里找到链接,也可以使用下拉菜单。

当最后一个包含 bootstrap.min.js 的脚本在代码中时,投资组合页面的链接不起作用。不知道为什么这不起作用。如果我取出下拉列表并使其成为常规链接,它将转到投资组合页面。这是我的代码:

<!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>

【问题讨论】:

    标签: javascript html css bootstrap-4


    【解决方案1】:

    min.js 库没有任何问题。只有您应该遵循完美的正文布局和语法。最好始终在 &lt;/body&gt; 标签结束之前保留您的 &lt;script&gt; 文件。最后,您忘记在正文中写入一些元素,而是将它们写在正文标记之外。我刚刚调整了你的一些代码。检查一次。

    <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>

    为了更好的实践,请通过这个link

    【讨论】:

    • 好的,我看到您将 body 标签移到了结束 head 标签下方的位置。但我没有看到任何其他变化。我仍然可以单击投资组合链接并进入该页面。它仍然不起作用。但是,如果我删除最后一个脚本文件,它就可以工作。那个脚本是干什么用的?
    • Bootstrap.min.css 包含 Bootstrap 正常工作所需的 CSS。 Bootstrap.min.js 包含运行 Bootstrap 所需的 javascript 代码。
    猜你喜欢
    • 2017-01-28
    • 2017-08-31
    • 2015-04-17
    • 1970-01-01
    • 2015-02-10
    • 1970-01-01
    • 2021-04-09
    • 1970-01-01
    • 2013-10-28
    相关资源
    最近更新 更多