我的下拉菜单不会显示给定的列表项，给定以下代码-解网

问：

我无法弄清楚为什么下拉菜单不会在给定以下代码的情况下显示列表项。下拉按钮应在单击时显示三个 list4ed 项目。我正在使用 Bootstrap，css 也在下面。


<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Oxygen:400,300,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/style.css">
    <title>Our Menu</title>
  </head>
  <body>
    <header>
        <nav id="header-nav" class=" navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-brand">
                    <div class="pull-left"><h1>Food, LLC</h1></div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="menuDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-bars"></i>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="menuDropdown">
                        <li><a class="dropdown-item" href="#Chicken">Chicken</a></li>
                        <li><a class="dropdown-item" href="#Beef">Beef</a></li>
                        <li><a class="dropdown-item" href="#Sushi">Sushi</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    
    <h1 class="text-center">Our Menu</h1>
    <div id="Box1">
      <h2 class="text-center">Chicken</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <br>
    </div>
    <div id="Box2">
      <h2 class="text-center">Beef</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <br>
    </div>
    <div id="Box3">
      <h2 class="text-center">Sushi</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        <!-- Include Bootstrap JS and jQuery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+JzVth6+0Z29w5Jw5F0oww5g5Bf5z5F5V5L5u5r5b5C5f5r5U5T5" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aA5b4CvE3Vd0R7w5a6f5/4xCb5O5r5B5f5B5f5/5C5r5u5r5r5T5f5B5f5B5I5f5U5T5" crossorigin="anonymous"></script>
  </body>
</html>

body {
    font-size: 16px;
    color: black;
    background-color: white;
    font-family: 'Oxygen', sans-serif;
}

#header-nav {
    background-color: grey;
    box-sizing: border-box;
    border-width: 10px;
    border-bottom-color: black;

}
h1 {
    margin:30px;
}
h2{
    background-color: grey;
    margin:0;
}
p{
    margin:0;
    background-color: grey;
}
#Box1 p{
    height: 1000px;
}
.dropdown-menu-full {
    width: 100%;
    background-color:blueviolet;
}

正如其他人所建议的那样，我添加了 jQuery 和 Javascript。我也尝试过使用代替物品。

HTML jQuery CSS Twitter-Bootstrap 下拉列表

...

</body>
    
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

</html>

这是一开始面临的最常见的问题，或者至少我很容易遇到这种情况，

我们的汉堡菜单没有给我们它的菜单项;)

. 基本上，您需要了解：

CSS - 负责颜色、填充等设计。
JS - 在我们的设计中添加动态性，比如当我们点击某些东西时会发生什么，等等。
JQuery - 它在 JS 中完成大部分工作，但某些功能仅由 JQuery 支持，例如折叠导航栏、警报等.

这些是轻量级捆绑包，每当您使用 Bootstrap 时，都应始终包含它们。因为你永远不知道什么时候复制/粘贴或使用可能使用 JS、Popper 或 JQuery 的引导功能。你最终会陷入困境，不知道这里到底发生了什么。

上一个：付款前使用 jquery 插件验证账单地址表单

下一个：选择后折叠垂直菜单

我的下拉菜单不会显示给定的列表项，给定以下代码

My dropdown menu will not display the given list items given the following code

评论