it-swarm.com.ru

Как закрыть открытую свернутую панель навигации при нажатии за пределами элемента панели навигации в Bootstrap 3?

Как я могу закрыть открытую свернутую панель навигации, щелкнув за пределами элемента панели навигации? В настоящее время единственный способ открыть или закрыть его - нажать кнопку navbar-toggle.

Смотрите здесь для примера и кода: 

До сих пор я пробовал следующее, которое, кажется, не работает:

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});
33
henrywright

Посмотрите, что:

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

Ваша скрипка работает с этим: http://jsfiddle.net/52VtD/5718/

Это модифицированная версия этот ответ , в которой отсутствует анимация, а также она немного сложнее.

Я знаю, что вызывать click() не очень элегантно, но collapse('hide') тоже не сработал для меня, и я думаю, что анимация немного приятнее, чем сложное добавление и удаление классов.

40
nozzleman

Принятый ответ не работает правильно. Нужно только проверить, имеет ли «navbar-collapse» класс «in». Затем мы можем запустить метод коллапса, как и ожидалось, используя нашу ссылку на панель навигации.

$(document).click(function (event) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
});
36
Paul Tarr

Решение, которое я решил использовать, было взято из принятого ответа здесь и из этот ответ

jQuery('body').bind('click', function(e) {
    if(jQuery(e.target).closest('.navbar').length == 0) {
        // click happened outside of .navbar, so hide
        var opened = jQuery('.navbar-collapse').hasClass('collapse in');
        if ( opened === true ) {
            jQuery('.navbar-collapse').collapse('hide');
        }
    }
});

Это скрывает открытое свернутое меню навигации, если пользователь щелкает где-либо за пределами элемента .navbar. Конечно, нажатие на .navbar-toggle все еще работает, чтобы закрыть меню тоже.

13
henrywright

Использование этого работает для меня.

$(function() {
  $(document).click(function (event) {
    $('.navbar-collapse').collapse('hide');
  });
});
12
Shiva Charan

stopPropagation() не всегда лучшее решение. Скорее используйте что-то вроде:

jQuery(document.body).on('click', function(ev){
    if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Not return false

    // Hide navbar
});

Я думаю, опасно предполагать, что вы никогда не захотите слушать какие-либо другие события из .navbar. Что невозможно, если вы используете stopPropagation().

4
pstenstrm

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

Чтобы исправить это, я добавил к ответу Пола Тарра, обернув решение проверкой, чтобы увидеть, произошел ли щелчок где-либо внутри 

if ($(event.target).parents(".navbar-collapse").length < 1) { }

Полный код станет:

$(document).click(function (event) {
if ($(event.target).parents(".navbar-collapse").length < 1) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
  }
});

В этой демонстрационной скрипке вы можете видеть, что если вы нажмете на ссылку, не являющуюся внутри панели, она не свернется.

1
maxshuty

Я добавил условие в ответ @ nozzleman, чтобы проверить, не было ли нажатие или щелчок по какому-либо элементу в меню, и если это так, не свернуть его.

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle") && clickover.parents('.navbar-collapse').length == 0) {
            $("button.navbar-toggle").click();
        }
    });
});
1
sonxurxo
$(document).click(function (event) {
 if ($('.navbar-collapse').attr('aria-expanded') == "true") {
        $('.navbar-collapse:visible').click();
    }
});
0
Venkanna t

Для Bootstrap 4:

$(document).click(function(event) {
  $(event.target).closest(".navbar").length || $(".navbar-collapse.show").length && $(".navbar-collapse.show").collapse("hide")
});
0
Timur

Для Bootstrap 4

Bootstrap 4 не имеет класса in. Это Coffeescript.

  $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')

В общем, если вы не нажмете кнопку или меню, закройте меню.

Примечание: Странно, в iOS нажатие на текст не регистрирует ни событие щелчка, ни событие mouseup. Нажатие на изображение вызывает события. 

0
Chloe