在我的网站的移动版本上,我有一个汉堡图标,当使用javascript单击时,该图标会打开全屏覆盖。链接是锚链接,因为它是一个一页的网站。单击链接之一时,当我希望关闭叠层时叠层保持打开状态。
我认为我遇到的问题是,因为我已经设置了jQuery代码,所以当单击这些链接之一时,会产生平滑的滚动效果。这可以正常工作,但是覆盖层保持打开状态。
因此,openNav / closeNav是使用javascript设置的,而滚动效果是使用jQuery设置的。我很难弄清楚该怎么做。
这是我的HTML:
<div id="mobile-navbar">
<img class="open-nav" src="img/open-nav.png" onclick="openNav()">
<a href="#1"><img class="logo-mobile" src="img/logo-mobile.png" alt=""></a>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#1">ABOUT</a>
<a href="#2">RIDING AREAS</a>
<a href="#3">FACILITY</a>
<a href="#4">PRICING AND SERVICES</a>
<a href="#5">CONTACT</a>
</div>
</div>
</div>
这里是Javascript(用于打开/关闭导航):
function menu(x) {
x.classList.toggle("change");
}
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
这是jQuery(用于平滑滚动):
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
您可以将onclick="closeNav();"
添加到所有链接。
好吧,我认为最好选择完整的js或仅使用Jquery。两者都不是一个好习惯,因为jquery本身会占用很多开销,因此在某些可以使用jquery的东西上使用纯js会被认为对另一半是不公正的。
对于纯Jquery:
$(document).ready(function(){
let isOpen = false; //=========> use a flag to toggle navbar
function navToggle(){
//Click event for Nav
$("#myNav").on('click', function(event) {
if(!isOpen){
isOpen = !isOpen;
$(this).css("height", "100%");
}else{
isOpen = !isOpen;
$(this).css("height", "0%");
}
});
}
//Click event for Nav Links
$("a").on('click', function(event) {
//Call nav to toggle
isOpen = true;
navToggle();
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});