到目前為止，我成功地通過菜單圖標打開和關閉菜單。但我想在任何點擊時關閉它。我對如何解決這個問題感到不知所措。我嘗試在 window/document/header/nav 上添加單擊事件偵聽器...但它似乎會在選擇任何內容之前立即關閉菜單。你會如何處理這個問題？let nav = document.querySelector(".header__nav");function toggleNavOn() { if (nav.style.visibility === "") { nav.style.visibility = "visible"; } else { nav.style.visibility = ""; } navToggle.classList.toggle("header__nav_toggle--toggled")}let navToggle = document.querySelector(".header__nav_toggle");navToggle.addEventListener("click", toggleNavOn);<header class="header"> <div class="header__container"> <div class="header__container_logo"> <a class="header__logo_link" href="#"><img class="header__logo_img" src="img/vtol-logo.svg" alt="Vtol Logo"></a> <a class="header__nav_toggle" href="javascript:void(0);"> <span></span> </a> </div> <nav class="header__nav" id="nav-bar"> <a class="header__nav_link" href="#video-container">Watch</a> <a class="header__nav_link" href="#features">Features</a> <a class="header__nav_link" href="#about">About</a> </nav> </div></header>
3 回答
叮當貓咪
TA貢獻1776條經驗 獲得超12個贊
忽然笑
TA貢獻1806條經驗 獲得超5個贊
要理解為什么在向窗口/文檔/（無論什么父元素）添加單擊事件處理程序時看到菜單立即關閉，有必要從事件捕獲和冒泡的討論開始。順序是捕獲 -> 單擊捕獲 -> 傳播。您單擊一個元素，它首先在窗口上被捕獲，然后一直沿著 DOM 向下到達最具體的 DOM 元素。然后它會一路“冒泡”備份觸發事件處理程序。
在您的場景中發生的情況是，菜單上的單擊事件不僅在該元素上觸發處理程序，而且還在每個父元素上觸發處理程序。一種可能的解決方案是event.stopPropagation()向菜單添加單擊事件處理程序，以便單擊事件不會冒泡到您附加“關閉菜單”功能的任何父 DOM 元素。
寶慕林4294392
TA貢獻2021條經驗 獲得超8個贊
https://jsfiddle.net/f21vnq5s/1/
您應該首先設置菜單的高度，然后在文檔中檢查單擊是否在標題中
它應該與 jquery 一起工作
$(document).mouseup(function (e)
{
var searchcontainer = $(".header");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
nav.style.visibility = "";
}
});
- 3 回答
- 0 關注
- 160 瀏覽
添加回答
舉報
0/150
提交
取消