How to close the menu when I click outside?

Question

I created a menu with Bootstrap 4. Here is the HTML code :

{% 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 %}

I want the menu to close when I click outside. It works with the JS code below, but it also closes when I click in it. It must close only if I click outside :

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

Here is a page of my site to test. In the menu at the top right (the filter box), when you select an option from the drop-down menu, it closes. If you click a white space in the menu, it closes.

Answer 1

Keep it simple: if you want to close .navbar-collapse when you click outside .navbar-collapse just write that.

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

  }
});

You don't even need to use IDs