Question

我网站上的下拉菜单只是拒绝工作，我看不出原因。我查看了这个网站和其他人，以及重读引导文档，但我不知道它为什么不起作用。他们不会下降。我知道它们被点击了，因为当我点击它们时，哈希符号会出现在URL中，但是没有掉落动画。

下面是我的代码，包含头部和导航栏。

其他人可以看到有什么问题吗？

<head>
    <title>Scott's Website</title>
    <link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    <script type="text/javascript" src="styles/bootstrap/css/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="styles/bootstrap/js/bootstrap.js"></script>
</head>

<body>
    <div class="container-fluid bg-dark">
        <div class="container bg-dark">
            <div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
                <div class="col-9">
                    <h1>Scott McMullan</h1>
                    <div class="row pt-0 pb-0 pl-0 pr-3 bg-dark text-light">
                        <div class="col-9">
                            <h7 class="font-weight-light">Studying full time at Griffith University.</h7>
                        </div>
                    </div>
                    <div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
                        <div class="col">
                            <h7 class="font-weight-light">Working towards a bachelor of Computer Science, majoring in Data Science & Artificial Intelligence.</h7>
                        </div>
                    </div>

                    <hr/>

                    <div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
                        <nav class="navbar navbar-expand-lg navbar-dark">
                            <a class="navbar-brand" href="#">
                                <img src="icon.jpg" width="30" height="30" alt="mannaz" />
                            </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">
                                        <a class="nav-link font-weight-bold" href="index.html">Home</a>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Experience
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item" href="#">Professional</a>
                                            <a class="dropdown-item" href="#">Academic</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Academic Course Breakdown</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Projects
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item" href="#">Professional</a>
                                            <a class="dropdown-item" href="#">Academic</a>
                                            <a class="dropdown-item" href="#">Personal</a>
                                        </div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="contact.html">Contact</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>

Answer 1

您的下拉列表无法正常工作的原因是您没有加载 popper.js 。弹出和下拉的所有内容都需要该文件。

此外，保持HTML的有效性始终是一个好主意（您在此处发布的代码无效）。建议在底部加载js文件（而不是将它们加载到头部）。

以下是工作代码（点击＆＃34;运行代码段＆＃34;按钮并展开到全屏以验证其是否有效）：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid bg-dark">
    <div class="container bg-dark">
        <div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
            <div class="col-9">
                <h1>Scott McMullan</h1>
                <div class="row pt-0 pb-0 pl-0 pr-3 bg-dark text-light">
                    <div class="col-9">
                        <h7 class="font-weight-light">Studying full time at Griffith University.</h7>
                    </div>
                </div>
                <div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
                    <div class="col">
                        <h7 class="font-weight-light">Working towards a bachelor of Computer Science, majoring in Data Science &amp; Artificial Intelligence.</h7>
                    </div>
                </div>

                <hr/>

                <div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
                    <nav class="navbar navbar-expand-lg navbar-dark">
                        <a class="navbar-brand" href="#">
                            <img src="https://placehold.it/60" width="30" height="30" alt="mannaz" />
                        </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">
                                    <a class="nav-link font-weight-bold" href="index.html">Home</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                                       aria-expanded="false">
                                        Experience
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="#">Professional</a>
                                        <a class="dropdown-item" href="#">Academic</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Academic Course Breakdown</a>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                                       aria-expanded="false">
                                        Projects
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" href="#">Professional</a>
                                        <a class="dropdown-item" href="#">Academic</a>
                                        <a class="dropdown-item" href="#">Personal</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="contact.html">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

＆＃13;

Answer 2

其他人说的不是真的，我是从本地文件加载popper.js。然而，没有加载的是jquery文件，因为我在本地拥有所有内容。

修复很简单，从https://code.jquery.com/jquery-3.3.1.min.js下载jquery源代码并在本地将其与我的HTML链接。

Answer 3

好像你必须再次阅读bootstrap-documentation： https://getbootstrap.com/docs/4.0/getting-started/introduction/

您正在使用的Bootstrap下拉列表需要popper.js 在引言中找到快速入门＆gt; JS

Bootstrap文档非常资源丰富。通常它就在那里;）

Answer 4

嗯，我自己学到了一些东西： PopperJS实际上捆绑了bootstrap-4。它只是隐藏在bootstrap.bundle.js

中

但你必须包括它。正如我在上一篇回答中所说：一切都在文档中！

https://getbootstrap.com/docs/4.0/components/dropdowns/

下拉菜单在导航栏中无法正常工作

4 个答案: