时间戳

首页 > 解决方案 > 单击容器外部时隐藏展开的菜单：如何使用代码片段

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

问题描述

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

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

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>

谢谢

标签： javascriptjquerymenucollapse

解决方案

通过使用 jQuery，您可以绑定到文档单击事件并在单击的元素不是容器本身或 div 元素的后代时隐藏 div 容器。

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

如果您想隐藏该容器而不测试容器本身或 div 元素的后代，只需删除条件并简单地使用container.hide();.

此外，不是display: none;在sub-menuCSS 中设置，而是手动设置它，以便您可以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>

推荐阅读