单击外部时如何关闭菜单？答案

【问题标题】：How to close the menu when I click outside?单击外部时如何关闭菜单？
【发布时间】：2019-09-02 10:43:33
【问题描述】：

我用 Bootstrap 4 创建了一个菜单。这是 HTML 代码：

{% block head %}
        <nav{{ navbar_attributes }}>
          {% if container_navbar %}
            <div class="container">
          {% endif %}

            {% if page.navigation_collapsible_first %}
              <div class="collapse-navbar-first">
                <div class="collapse bg-light navbar-collapse" id="CollapsingNavbarFirst">
                  {{ page.navigation_collapsible_first }}
                </div>
              </div>
            {% endif %}

            {{ page.navigation_menu_first }}
            {{ page.navigation_notification_first }}
            {{ page.navigation_logo }}
            {{ page.navigation_notification_second }}
            {{ page.navigation_menu_second }}

            {% if page.navigation_collapsible_second %}
              <div class="collapse-navbar-second">
                <div class="collapse bg-light navbar-collapse" id="CollapsingNavbarSecond">
                  {{ page.navigation_collapsible_second }}
                </div>
              </div>
            {% endif %}

          {% if container_navbar %}
            </div>
          {% endif %}
        </nav>
{% endblock %}

我希望在单击外部时关闭菜单。它适用于下面的 JS 代码，但当我单击它时它也会关闭。只有当我点击外部时它才必须关闭：

  $(document).click(function (event) {
    if (!$(event.target).closest('#CollapsingNavbarFirst').length) {
      $('.navbar-collapse').collapse('hide');
    }
    if (!$(event.target).closest('#CollapsingNavbarSecond').length) {
      $('.navbar-collapse').collapse('hide');
    }
  });

这是我要测试的网站页面。在右上角的菜单（过滤器框）中，当您从下拉菜单中选择一个选项时，它会关闭。如果单击菜单中的空白区域，它将关闭。

【问题讨论】：

标签： javascript bootstrap-4 twig drupal-8 collapse

【解决方案1】：

保持简单：如果你想在 .navbar-collapse 外部单击时关闭 .navbar-collapse，只需写下即可。

/// When you click everywhere in the document
$(document).click(function (event) {

  /// If *navbar-collapse* is not among targets of event
  if (!$(event.target).is('.navbar-collapse *')) {

    /// Collapse every *navbar-collapse*
    $('.navbar-collapse').collapse('hide');

  }
});

您甚至不需要使用 ID

【讨论】：

我刚刚在我的网站上应用了您的代码，但它并没有解决问题
如果您希望人们为您编写代码，您应该提供一个可编辑的示例，我们不会在您的项目中编写代码。我的 sn-p 在大多数情况下应该可以工作，但我不知道您的页面上还有什么。我将编辑我的答案以涵盖更多用例，但不能保证从答案中复制粘贴的代码可以解决您的问题。

【解决方案2】：

document.addEventListener("click", function(e){
   x = e.clientX;
    y = e.clientY;
    var elementMouseIsOver = document.elementFromPoint(x, y);
    if(elementMouseIsOver.id=="menu"){
      console.log("menu");
    }
    else{
      console.log("not menu");
    }
});

#menu{
width:100px;
height:100px;
background-color:red;
}
.test{
width:300px;
height:300px;
background-color:blue;
}

<div class="test">
<div id="menu"></div>
</div>

【讨论】：