В моем меню используется Bootstrap 3, и я не могу предотвратить выпадающее меню при нажатии. Как я могу это сделать?
// Add open class if active
$('.sidebar-nav').find('li.dropdown.active').addClass('open');
// Open submenu if active
$('.sidebar-nav').find('li.dropdown.open ul').css("display","block");
// Change active menu
$(".sidebar-nav > li").click(function(){
$(".sidebar-nav > li").removeClass("active");
$(this).addClass("active");
});
// Add open animation
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add close animation
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
Вам нужно остановить событие от пузырьков дерева DOM:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation предотвращает событие до достижения node, где он в конечном итоге обрабатывается меню скрытия Bootstrap.
Я считаю, что это должно быть более правильным решением, так как остановка распространения по событию click может иногда вызывать проблемы на более поздних этапах разработки. Вы можете прочитать больше об этом здесь: http://css-tricks.com/dangers-stopping-event-propagation/ Вместо этого это решение останавливает распространение в событии Bootstrap hide (hide.bs.dropdown), что останавливает его переход к скрытому (hidden.bs.dropdown) событие.
Следующий код был взят и отредактирован мной для того, чтобы он работал во всех раскрывающихся списках Bootstrap, как это было изначально взято отсюда: Предотвращение закрытия раскрывающегося меню при щелчке Я лично предпочитаю этот способ также потому, что он использует встроенные выпадающие события Bootstrap, которые можно найти здесь: https://getbootstrap.com/docs/3.4/javascript/#dropdowns-events.
$(function() {
$('.dropdown').on({
"click": function(event) {
if ($(event.target).closest('.dropdown-toggle').length) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
"hide.bs.dropdown": function(event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});
Не закрыть в боковом меню щелчка
$(function() {
var closeble = false;
$('body').on('click', function (e) {
if (!$(event.target).is("a.dropdown-toggle")) {
closeble = false;
}
});
$('.dropdown').on({
"click": function(event) {
if ($(event.target).closest('.dropdown-toggle').length) {
closeble = true;
} else {
closeble = false;
}
},
"hide.bs.dropdown": function() {
return closeble;
}
});
});
Вы можете временно отключить функциональность выпадающего меню. Это обходное решение.
Пример с полем ввода внутри раскрывающегося "меню":
//for dropdown field not closing when clicking on inputfield
$(document).on('focus', 'input', function(e) {
// this attribute can be anything except "dropdown", you can leave it blank
$('#yourDropdownID').attr('data-toggle','off');
});
//for dropdown field back to normal when not on inputfield
$(document).on('focusout', 'input', function(e) {
$('#yourDropdownID').attr('data-toggle','dropdown');
});
Это можно использовать для всего, что можно щелкнуть, и вы можете индивидуально определить, какие элементы нажали, закрыть или не закрыть раскрывающееся меню.