Как закрыть меню, когда я нажимаю снаружи? - PullRequest
Новая
       37

Как закрыть меню, когда я нажимаю снаружи?

0 голосов
/ 11 апреля 2019

Я создал меню с помощью 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');
    }
  });

Вот страница моего сайта для тестирования.В меню в правом верхнем углу (поле фильтра) при выборе параметра в раскрывающемся меню он закрывается.Если щелкнуть пробел в меню, оно закроется.

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019 

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>
0 голосов
/ 12 апреля 2019

Будьте проще: если вы хотите закрыть .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');

  }
});

Вам даже не нужно использовать идентификаторы

...