Как закрыть панель навигации, нажав снаружи? - PullRequest
Новая
       27

Как закрыть панель навигации, нажав снаружи?

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

У меня есть сайт Drupal 8.6.8 с темой Bootstrap 3.3.7

Я хочу, чтобы мое меню навигации закрывалось, когда я нажимал снаружи.Я пробовал с кодом: 

(function ($) {
  'use strict';

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

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

}(jQuery));

https://css -tricks.com / dangers-stopping-event-пропаганда /

Это не работает, если ящелкните за пределами меню навигации, он не работает. Этот код работает только в том случае, если я удаляю второй или оставляю второй и удаляю первый.

Как применить это в меню 2?

ОБНОВЛЕНИЕ:

Я нашел ответ: 

(function ($) {
  'use strict';

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

}(jQuery));

Ответы [ 2 ]

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

Вы можете использовать эту функцию 

function OnwindowClick(elem , action){
    $(document).on('click',function(e){
        if (!$(elem).is(e.target) // if the target of the click isn't the container...
            && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
        {
            action();
        }
    });
}

и использовать ее как 

// OnwindowClick(elem , action) add the prevent elements in `elem` something like this
OnwindowClick('#navbar-collapse-first , #navbar-collapse-second', function(){
   $('.navbar-collapse-first, .navbar-collapse-second').collapse('hide');
});

Примечания:

  • Нет необходимости использовать .closest() использовать селектор напрямую

  • elem - это элементы, предотвращающие щелчок документа по нему

Дополнительно: Вам все еще нужно добавить кнопки к elem .. #navbar-collapse-first , #navbar-collapse-second , button1_Selector , button2_Selector

Пример того, как использовать эту функцию 

$(document).ready(function(){
  $('button.clickable').on('click' , function(){
    $(this).text($(this).text() == 'Like' ? 'Dislike' : 'Like');
  });
  
  OnwindowClick('button.clickable' , function(){
    $('button.clickable').fadeOut(400);
    setTimeout(function(){
      $('button.clickable').fadeIn(400);
    } , 5000);
  });
});


function OnwindowClick(elem , action){
    $(document).on('click',function(e){
        if (!$(elem).is(e.target) // if the target of the click isn't the container...
            && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
        {
            action();
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clickable">Like</button>
0 голосов
/ 11 февраля 2019

Вы пробовали это: 

<code>
    $(document).click(function (event) {
    if (!$(event.target).closest('#navbar-collapse-second, #navbar-collapse-second').length) {
      $('.navbar-collapse-second, .navbar-collapse-second').collapse('hide');
    }
  });
...