如果使用以下代码，我的下拉菜单将不会显示给定的列表项

问题描述 投票：0回答：1

我不明白为什么下拉菜单不会显示给出以下代码的列表项。单击下拉按钮应显示三个列表项。我正在使用 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 dropdown
1个回答
0
投票

如需即时解决方案：只需前往 https://getbootstrap.com/docs/4.4/getting-started/introduction/#js 并将脚本标签复制并粘贴到代码中。您可以将它们添加到正文后面的 head 标记中或 HTML 结束标记之前。 像这样：

...

</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 的引导程序功能。而你最终会陷入困境，而不知道这里到底发生了什么。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.