点击外面时如何关闭菜单？

Question

我用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');
    }
  });

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

Answer 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

Answer 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>