我有一个汉堡菜单,几乎只有一个错误/问题,我无法弄清。我的导航链接到主页上的不同区域。因此,用户可以在主页上单击导航链接,该链接将立即将他们带到页面上的所需位置。
我的问题来自没有负载,因此一旦用户单击导航链接,便将其带到该位置,但下拉菜单不会关闭。我尝试将.hide添加到JS中,从而在单击链接时隐藏了下拉菜单,但这创建了我的新问题。
用户单击导航链接之一后,它不会隐藏菜单,但是再次单击菜单图标后,菜单将完全不会打开。在开发工具中,我看到在单击导航链接之一时,它的显示风格为display:none,所以我觉得问题可能出在这里。感谢您的帮助,如果需要其他信息,请告诉我!
HTML:
<nav class="navbar navbar-light navbar-fixed-top">
<div class="wrapping container-fluid">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav navbar-nav float-sm-right mr-0 menu">
<li class="nav-item">
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workshops">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#locations">Location</a>
</li>
<li class="nav-item">
<a class="nav-link last-link" href="#register">Register</a>
</li>
</ul>
<a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a>
</div>
</nav>
此菜单的CSS:
.menu{
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.open{
height: 295px;
}
.hamburger {
cursor: pointer;
padding: 15px 10px 15px 0;
display: block;
float: right;
margin-top: 15px;
}
JS:
$('.hamburger').on('click', function () {
$('.menu').toggleClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').hide();
});
最佳答案
如果要使用.toggleClass('open')
打开菜单,请同时使用它来关闭菜单。
通常,尽管如此,您将改为使用.addClass()
和.removeClass()
:
$('.hamburger').on('click', function () {
$('.menu').addClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').removeClass('open');
});