我不明白为什么下拉菜单不会显示以下代码的列表项。单击下拉按钮应显示三个列表项。我使用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，就像其他人建议的那样。我也试过用代替物品。
1条答案
按热度按时间n7taea2i1#
**对于即时解决方案：**只需转到https://getbootstrap.com/docs/4.4/getting-started/introduction/#js并将脚本标记复制并粘贴到代码中。您可以将它们添加到body之后的head标记中，也可以将它们添加到结束HTML标记之前。就像这样：
这是一开始最常见的问题，或者至少我一直倾向于这样，
我们的汉堡菜单没有给予菜单项;）
。基本上，您需要了解：
这些都是轻量级包，无论何时使用Bootstrap都应该包含它们。因为你永远不知道你什么时候复制/粘贴或使用可能使用JS、Popper或JQuery的引导功能。结果你被困在这里，却不知道这里到底发生了什么。