在我網(wǎng)站的移動版本上，我有一個漢堡包圖標(biāo)，當(dāng)使用 JavaScript 單擊時，該圖標(biāo)會打開全屏疊加層。這些鏈接是錨鏈接，因為它是一頁網(wǎng)站。單擊其中一個鏈接時，當(dāng)我希望覆蓋層關(guān)閉時，覆蓋層保持打開狀態(tài)。我相信我遇到的問題是因為我設(shè)置了 jQuery 代碼，因此單擊這些鏈接之一時會出現(xiàn)平滑的滾動效果。這可以完美地工作，但是覆蓋層保持打開狀態(tài)。所以openNav/closeNav是用javascript設(shè)置的，滾動效果是用jQuery設(shè)置的。我很難弄清楚如何解決這個問題。這是我的 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（用于打開/關(guān)閉導(dǎo)航）：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; }); } });});
2 回答
慕桂英4014372
TA貢獻1871條經(jīng)驗 獲得超13個贊
好的，所以我認(rèn)為最好選擇使用完整的 js 或僅使用 Jquery。將兩者結(jié)合起來并不是一個好的做法，因為 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;
});
}
});
});
- 2 回答
- 0 關(guān)注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消