jquery - HTML Bootstrap 下拉菜单不下拉

Question

所以我正在学习如何使用 Flask(一个用于帮助开发 HTML 页面的 python 模块)并且我还包含了 Bootstrap 来创建我的导航栏，但是由于某些原因导航的下拉菜单没有下拉.

这是实际的下拉菜单代码:

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="/">Navigation</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">
            <!-- Dropdown menu -->
            <li class="nav-item dropdown">

                <!-- Menu Title -->
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Animals
                </a>

                <!-- Dropdown -->
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                    <!-- Dinosaur Link -->
                    <a class="dropdown-item" href="/dinosaur_homepage">Dinosaurs</a>

                    <!-- Link Divider -->
                    <div class="dropdown-divider"></div>

                    <!-- Birds Link -->
                    <a class="dropdown-item" href="/birds_homepage">Birds</a>
                </div>

            </li>
        </ul>
    </div>
</nav>

这是完整的源代码(不包括 python 文件):https://pastebin.com/VhrxkbYi

Answer 1

在您的情况下，您错过了 js 和 css 文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="/">Navigation</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">
            <!-- Dropdown menu -->
            <li class="nav-item dropdown">

                <!-- Menu Title -->
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Animals
                </a>

                <!-- Dropdown -->
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                    <!-- Dinosaur Link -->
                    <a class="dropdown-item" href="/dinosaur_homepage">Dinosaurs</a>

                    <!-- Link Divider -->
                    <div class="dropdown-divider"></div>

                    <!-- Birds Link -->
                    <a class="dropdown-item" href="/birds_homepage">Birds</a>
                </div>

            </li>         
        </ul>
    </div>
</nav>