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

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) {

    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) {

    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>