我正在構建一個超級選單，每個選單上都有一個關閉按鈕，效果很好。但是，我需要撰寫一些 JavaScript 來說明，“如果您在大型選單打開時單擊外部選單，請將其關閉”。
我在下面寫了一個腳本。它會檢測用戶何時在超級選單內部單擊，但在用戶單擊外部時則不會。在這種情況下，洗掉display-on使元素具有display: block;.
const dropDownMenu = document.getElementsByClassName("drop-down");
for (let i = 0; i < dropDownMenu.length; i ) {
dropDownMenu[i].addEventListener("click", (e) => {
// If clicking in any area that has drop-down class, do nothing.
if (dropDownMenu[i].contains(e.target)) {
console.log("clicked in mega menu area");
// If clicking in any area outside drop-down class, remove display-on class which closes the menu.
} else {
console.log("clicked outside mega menu area");
document.querySelector(".display-on").classList.remove("display-on");
}
});
}
如果需要，可以在此處查看作業演示。
謝謝。
uj5u.com熱心網友回復：
您可以向檔案添加一個全域事件偵聽器，以檢查單擊的內容是否不是超級選單。如果您需要任何額外的幫助，請告訴我:)
document.onclick = (e) => {
if (e.target.contains(document.getElementsByClassName("drop-down")[0])) {
console.log('close mega menu');
document.getElementsByClassName("drop-down")[0].classList.remove("display-on");
}
}
uj5u.com熱心網友回復：
從上面的評論...
“當然，OP 還需要在任何分類元素之外注冊“退出下拉”事件的處理
drop-down。document.body可能是監聽的正確元素。”
……像這樣……
function handleDropDownMenuBehavior(evt) {
if (evt.target.closest('.drop-down') === null) {
document.querySelector(".display-on").classList.remove("display-on");
console.log("clicked outside mega menu area");
} else {
console.log("clicked in or at mega menu area");
}
}
document.body.addEventListener('click', handleDropDownMenuBehavior);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/352854.html
標籤：javascript html
上一篇：web面試篇-js