我正在尝试创建一个导航栏，该导航栏在窗口较小时会崩溃，但是应该显示菜单的按钮却没有这样做。简而言之，合拢按钮不起作用。应该显示一个下拉菜单，但不显示。
控制台中没有错误，我验证了jQuery链接在正确的位置。我在浏览器中检查了js插件，而jQuery在其他方面也起作用。我对此很陌生，所以我也将不胜感激。
编辑：
<nav class="navbar sticky-top navbar-expand-sm navbar-dark bg-dark" id="navbar">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#jumbotron-picture">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">My Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-div">Contact</a>
</li>
</ul>
</div>
</nav>
这就是我所包含的
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
还有我的jQuery：
<script type="text/javascript">
// navbar fade-in
$(document).ready(function() {
// hide .navbar first
$(".navbar").hide();
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we start fadeIn
var hT = $('#about').offset().top,
hH = $('#about').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
$('.navbar').fadeIn();
}
});
});
});
//View my work button
$(document).ready(function() {
$(".down").click(function() {
$('html, body').animate({
scrollTop: $("#about").offset().top
}, 900);
});
});
这是我的CSS：
<style type="text/css">
body {
font-family: 'Open Sans', serif;
position: relative;
}
.jumbotron {
width: 100wh;
height: 100vh;
color: #fff;
background: rgb(70, 16, 140);
background: linear-gradient(120deg, rgba(70, 16, 140, 1) 0%, rgba(78, 23, 145, 1) 10%, rgba(76, 33, 134, 1) 18%, rgba(106, 68, 156, 1) 26%, rgba(91, 45, 149, 1) 34%, rgba(106, 64, 159, 1) 39%, rgba(90, 33, 162, 1) 48%, rgba(107, 60, 166, 1) 55%, rgba(100, 39, 176, 1) 62%, rgba(102, 58, 159, 1) 69%, rgba(99, 36, 179, 1) 79%, rgba(85, 36, 149, 1) 85%, rgba(106, 75, 145, 1) 95%, rgba(79, 15, 161, 1) 100%);
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;
margin: 0;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
span {
font-weight: bold;
color: #EBD727;
}
.jumbotron h1 {
align-content: center;
}
#jumb-text {
text-align: center;
position: relative;
top: 200px;
}
#myPicture {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
display: block;
border-radius: 50%;
}
#about-text {
text-align: center;
color: #343A40;
border-bottom: 3px solid #EBD727;
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
#about-background {
width: 71%;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
}
.navbar {
height: 50px;
border-bottom: 4px solid #EBD727;
}
#portfolio {
background-color: #F5F5F5;
padding: 10px 30px 50px 30px;
}
#portfolio-text {
text-align: center;
color: #343A40;
border-bottom: 3px solid #EBD727;
width: 230px;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
padding-top: 50px;
}
#img-laser {
max-width: 47%;
height: auto;
margin: auto;
}
#img-maze {
max-width: 100%;
height: auto;
margin: 0 auto;
}
#card-id {
background-color: #F5F5F5;
border: none;
}
.contact-div {
padding-top: 100px;
padding-bottom: 50px;
background-color: #252934;
color: #FEFEFE;
}
#email,
#subject,
#textarea {
background-color: #1E242C;
}
#view {
text-align: center;
position: relative;
top: 200px;
}
#button {
height: 50px;
width: 150px;
transition: all 0.4s;
background-color: transparent;
color: #F5F5F5;
}
#button:hover {
background-color: #EBD727;
color: #343A40;
}
#first {
width: 50%;
}
.nav-item > .active a{
color:#EBD727 !important;
}
答案 0 :(得分：1)
当我将navbar-expand-sm更改为navbar-expand-md时，它起作用了。另外，我认为数据目标和以下ID应该匹配。我对此也不陌生，所以如果我没有太多帮助，我感到抱歉。
答案 1 :(得分：0)
我无法完全说出您要实现的目标-是否希望在用户滚动到#about容器底部时显示导航栏，而不管窗口大小如何？
当我在if语句中记录值的输出时，它们似乎从来都不是真的。如果删除除第一个条件（当前滚动位置大于#about容器或wS > (hT+hH-wH)的高度）以外的所有内容，则在滚动后导航栏会逐渐消失。
答案 2 :(得分：0)
答案实际上非常简单。出于某种原因，下拉菜单中导航栏的背景是白色而不是深色，所以我看不到它。