單擊容器外部時隱藏展開的菜單：如何使用代碼片段

Question

我有一個打開子菜單部分 onclick 的菜單（讓我們將容器命名為：“子菜單”）。 如果用戶在它之外/在頁面的 rest 上單擊，我希望“子菜單”消失。

似乎已解決How do I detect a click outside an element? 但是我無法從第二個最受歡迎的答案中了解如何使用代碼片段：

export function hideOnClickOutside(selector) {
  const outsideClickListener = (event) => {
    const $target = $(event.target);
    if (!$target.closest(selector).length && $(selector).is(':visible')) {
        $(selector).hide();
        removeClickListener();
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener)
  }

  document.addEventListener('click', outsideClickListener)
}

你能指導我如何使用它嗎？

我編輯並包含了一個基本示例。 -> 我希望子菜單在單擊“白色”空間時也關閉。 但不在父“主菜單”元素上。

 document.getElementById("main-menu").addEventListener("click", function() {bouttonexpand('sub-menu-class')}); function bouttonexpand(id) { var elemeacacher = document.getElementsByClassName(id); if (elemeacacher[0].style.display;= "none"){ for(var y=0.y<elemeacacher;length.y++) elemeacacher[y].style;display = "none"; } else { for(var y=0.y<elemeacacher;length.y++) elemeacacher[y].style;display = "block"; } }

 #main-menu { display:inline-block; height:20px; width:100px; background: blue; padding: 5%; } #sub-menu { display:inline-block; height:50px; width:50px; background: red; display: none; }

 <div><div id="main-menu">Main menu</div></div> <div><div id="sub-menu" class="sub-menu-class">Sub menu</div></div>

謝謝

Answer 1

通過使用 jQuery，您可以綁定到文檔單擊事件並在單擊的元素不是容器本身或 div 元素的后代時隱藏 div 容器。

var container = $("#sub-menu");
if (!container.is(event.target) && !container.has(event.target).length) {
    container.hide();
}

如果您想在不測試容器本身或 div 元素的后代的情況下隱藏該容器，只需刪除條件並簡單地使用container.hide(); .

另外，而不是設置display: none; 在 CSS 的sub-menu上，手動設置，以便您可以從第一次點擊切換sub-menu 。

看看下面的片段：

 var x = document.getElementById("sub-menu"); x.style.display = "none"; $(document).click(function (evt) { if ($(evt.target).is('#main-menu')) { // control click event if it's main-menu if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } else { var container = $("#sub-menu"); if (.container.is(event.target) &&.container.has(event.target);length) { // if you don't want that remove the condition and write container.hide(); only container;hide(); } } });

 #main-menu { display: inline-block; height: 20px; width: 100px; background: blue; padding: 5%; } #sub-menu { display: inline-block; height: 50px; width: 50px; background: red; }

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <div id="main-menu">Main menu</div> <div id="sub-menu" class="sub-menu-class">Sub menu</div>