单击容器外部时隐藏展开的菜单：如何使用代码片段

Question

我有一个菜单，可以在单击时打开子菜单部分（让我们将容器命名为：“子菜单”）。如果用户单击“子菜单”外部/页面的其余部分，我希望“子菜单”消失。

似乎已解决如何检测元素外部的点击？ 但我无法从第二个最受欢迎的答案中获取如何使用代码片段：

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) {&nbsp; &nbsp; container.hide();}如果您想隐藏该容器而不测试容器本身或 div 元素的后代，只需删除条件并简单地使用container.hide();.另外，不要在 CSS 中设置，而是display: none;手动sub-menu设置，这样您就可以sub-menu从第一次单击时进行切换。看看下面的片段：var x = document.getElementById("sub-menu");x.style.display = "none";$(document).click(function (evt) {&nbsp; &nbsp; if ($(evt.target).is('#main-menu')) { // control click event if it's main-menu&nbsp; &nbsp; &nbsp; &nbsp; if (x.style.display === "none") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x.style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x.style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; var container = $("#sub-menu");&nbsp; &nbsp; &nbsp; &nbsp; if (!container.is(event.target) && !container.has(event.target).length) { // if you don't want that remove the condition and write container.hide(); only&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; container.hide();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }});#main-menu {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; background: blue;&nbsp; &nbsp; padding: 5%;}#sub-menu {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; height: 50px;&nbsp; &nbsp; width: 50px;&nbsp; &nbsp; background: red;}<script src="https://code.jquery.com/jquery-3.5.1.min.js"&nbsp; &nbsp; 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>