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

我用bootstrap4创建了一个菜单。以下是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 %}

---

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

简单一点：如果您想关闭。当您单击外部时，导航栏将折叠。导航栏折叠只需写入即可

/// 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 document.addEventListener单击，函数E{ x=e.clientX； y=e.clientY； var elementMouseIsOver=document.elementFromPointx，y； ifelementMouseIsOver.id==菜单{ console.logmenu； } 否则{ console.lognot菜单； } }; 菜单{ 宽度：100px； 高度：100px； 背景色：红色； } .测试{ 宽度：300px； 高度：300px； 背景颜色：蓝色； }

---

我只是在我的网站上应用了你的代码，但这并不能解决问题。如果你想让人们为你编写代码，你应该提供一个可编辑的示例，我们不是在你的项目中编写代码。我的代码片段在大多数情况下都可以使用，但我不知道您的页面上还有什么其他内容。我将编辑我的答案以涵盖更多用例，但不保证答案中的复制粘贴代码能够解决您的问题。

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

  }
});