Как закрыть закрытую навигационную панель при нажатии за пределами элемента navbar? В настоящее время единственный способ открыть или закрыть его - нажать кнопку navbar-toggle.
См. здесь для примера и кода:
До сих пор я пробовал следующее, которое, похоже, не работает:
jQuery(document).click(function() {
});
jQuery('.navbar').click(function(event) {
jQuery(".navbar-collapse").collapse('hide');
event.stopPropagation();
});
Посмотрите, что:
$(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') тоже не работал у меня, и я думаю, что анимация немного приятнее, чем добавление и удаление классов.
Принятый ответ не работает корректно. Нужно только проверить, имеет ли "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');
}
});
Использование этого работает для меня.
$(function() {
$(document).click(function (event) {
$('.navbar-collapse').collapse('hide');
});
});
Решение, которое я решил использовать, было взято из принятого ответа здесь и из этого ответа
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 по-прежнему работает, чтобы закрыть меню.
stopPropagation() не всегда является лучшим решением. Скорее используйте что-то вроде:
jQuery(document.body).on('click', function(ev){
if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Not return false
// Hide navbar
});
Мне кажется опасным предположить, что вы никогда не хотите слушать какое-либо другое событие из .navbar. Это невозможно, если вы используете stopPropagation().
Я добавил условие для ответа @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();
}
});
});
У меня был сценарий, где у меня были не ссылки, и я не хотел, чтобы панель закрывалась, если пользователь нажимает на эти элементы при аварии. Другие ответы здесь закрывают панель, даже если вы нажмете на текст элемента, который не является ссылкой.
Чтобы исправить это, я добавил к ответу Пол Тарр, завернув решение в чек, чтобы узнать, произошел ли щелчок в любом месте внутри
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');
}
}
});
В этой демонстрационной скрипте вы можете видеть, что если вы нажмете на не-ссылку внутри панели, она не разрушит ее.
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 не регистрируется событие click или событие mouseup. Однако при нажатии на изображение срабатывают события.
Для Bootstrap 4:
$(document).click(function(event) {
$(event.target).closest(".navbar").length || $(".navbar-collapse.show").length && $(".navbar-collapse.show").collapse("hide")
});
Вы, ребята, серьезно дали только неправильные ответы, которые не работают? Я впечатлен, никогда не видел этого раньше.
$(document).click(function (event) {
if ($('.navbar-collapse').attr('aria-expanded') == "true") {
$('.navbar-collapse:visible').click();
}
});
$(window).click(function (e) {
if ($(e.target).closest('.codehim-dropdown').length) {
return;
}
if ($(e.target).closest(offCanvas).length) {
return;
}
//check if menu really opened
if ($(hamburger).hasClass("active")) {
closeMenu();
}
$(dimOverlay).fadeOut();
$(".menu-items").slideUp();
$(".dropdown-heading").removeClass("active");
});
Преобразованный ответ сопла для Bootstrap 4 (.3.1):
$(document).ready(function () {
$(document).click(
function (event) {
var target = $(event.target);
var _mobileMenuOpen = $(".navbar-collapse").hasClass("show");
if (_mobileMenuOpen === true && !target.hasClass("navbar-toggler")) {
$("button.navbar-toggler").click();
}
}
);
});
Размещается в ngOnInit().
Когда документ загружен, этот код ожидает события щелчка. Если раскрывающийся список меню мобильного устройства (т.е. Складная часть панели навигации имеет класс "show") и объект, по которому щелкают (цель), не является кнопкой меню мобильного устройства (т.е. не имеет класса navbar-toggler), то мы говорим, что кнопка мобильного меню была нажата, и меню закрывается.