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

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

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

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>

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

How to close the menu when I click outside?

javascript

collapse

twig

drupal-8

bootstrap-4