亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在單擊時關閉此菜單?

如何在單擊時關閉此菜單?

湖上湖 2023-10-17 17:21:04
到目前為止,我成功地通過菜單圖標打開和關閉菜單。但我想在任何點擊時關閉它。我對如何解決這個問題感到不知所措。我嘗試在 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個贊

您可以查看“焦點”和“模糊”事件。

https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event


查看完整回答
反對 回復 2023-10-17
?
忽然笑

TA貢獻1806條經驗 獲得超5個贊

要理解為什么在向窗口/文檔/(無論什么父元素)添加單擊事件處理程序時看到菜單立即關閉,有必要從事件捕獲和冒泡的討論開始。順序是捕獲 -> 單擊捕獲 -> 傳播。您單擊一個元素,它首先在窗口上被捕獲,然后一直沿著 DOM 向下到達最具體的 DOM 元素。然后它會一路“冒泡”備份觸發事件處理程序。

在您的場景中發生的情況是,菜單上的單擊事件不僅在該元素上觸發處理程序,而且還在每個父元素上觸發處理程序。一種可能的解決方案是event.stopPropagation()向菜單添加單擊事件處理程序,以便單擊事件不會冒泡到您附加“關閉菜單”功能的任何父 DOM 元素。


查看完整回答
反對 回復 2023-10-17
?
寶慕林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 = "";

    }

});


查看完整回答
反對 回復 2023-10-17
  • 3 回答
  • 0 關注
  • 160 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號