我只是在简单的导航栏的最后一部分，但是我注意到它在移动视图中并且显示汉堡包时，我单击了汉堡包以显示菜单，但是当我单击以将其关闭时，它没有显示关闭。我知道它一定在javascript代码中，但我不明白它是如何工作的。有人可以帮忙吗？ 这是我的完整脚本：
<script>
$(document).ready(function () {
$('.navbar .dropdown-item').on('click', function (e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({"top": -999, "left": -999});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
$('.nav-link').on('click',function() {
$('.navbar-collapse').collapse('hide');
});
</script>
和html
<!------ NAV BAR--------->
<div class="navbar navbar-expand-md navbar-dark" fixed-top role="navigation">
<a class="navbar-brand" href="index.htm"></a> </img>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.htm"><i class="fa fa-home" aria-hidden="true"></i> </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="portfolio.htm">MY PORTFOLIO</a>
<a class="dropdown-item" href="abandoned.htm">Abandoned Places</a>
<a class="dropdown-item" href="motorsport.htm">Motorsport</a>
<a class="dropdown-item" href="music.htm">Music</a>
<a class="dropdown-item" href="sports.htm">Sports</a>
<a class="dropdown-item" href="landscapes.htm">Landscapes</a>
</div></li>
<li class="nav-item">
<a class="nav-link" href="media.htm">Media</a></li>
<a class="nav-link" href="shop.htm">Shop</a></li>
<a class="nav-link" href="blog.htm">Blog</a></li>
<a class="nav-link" href="contact.htm">Contact</a></li>
</ul>
<div class="social-part">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div></div>
<!-------------end nav bar--------->
和CSS
.social-part
.fa{ padding-right:20px; font-size:30px; color:white;}
ul li a{ margin-right: 20px;}
/* navbar*/
@media (max-width: 991px) { .navbar { overflow: auto;max-height: 85vh; display: flex; align-items: flex-direction: row; flex-start;}}
/* scrollbar on collapse*/
.navbar { min-height: 30px; width:100%; padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:1px; background-color: transparent!important;
position: fixed; z-index: 9999; border-style:solid; border-width:0px; border-color:#D9D9D8;}
.nav-link {color: #FFFFFF !important;}
.nav-link .fa{ padding-right:20px; font-size:30px; color:white;}
.navbar .active {text-color: #6D6C6B; text-decoration: 'Dosis', sans-serif; background-color: transparent;
text-transform: uppercase; font-weight:bold;}
.dropdown-toggle,
.navbar
.dropdown-menu a {cursor: pointer; }
.navbar
.dropdown-item.active,
.navbar
.dropdown-item:active {color: #F9F3DB! text-decoration: calibri;opacity:0.9;}
.navbar
.dropdown-item:focus,
.navbar
.dropdown-item:hover {color: #F9F3DB!important; text-decoration: calibri; background-color: #6d6c6b; opacity:0.9;}
.dropdown:hover>.dropdown-menu {display: block; color: #6D6C6B!important; font: calibri; background-color: #D9D9D8;opacity:0.95;!important}
@media (min-width: 767px)
.navbar
.dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } }
答案 0 :(得分：0)
好的，我发现问题出在脚本上。我删除了所有内容，并重新编写了标题中的链接，如下所示，现在单击菜单会折叠。成功！
<html lang="en">
<head>
<title>Rock Click</title>
<meta charset="utf-8">
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>