我的菜单使用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();
});
答案 0 :(得分:30)
你需要阻止事件冒泡DOM树:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation
阻止事件到达Bootstrap隐藏菜单最终处理的节点。
答案 1 :(得分:20)
我认为这应该是一个更合适的解决方案,因为在click事件上停止传播有时可能会在以后的开发中引起问题。您可以在此处阅读更多内容:http://css-tricks.com/dangers-stopping-event-propagation/此解决方案会停止在Bootstrap 隐藏( hide.bs.dropdown )事件上的传播,从而阻止其继续进入隐藏( hidden.bs.dropdown )事件。
我自己编写并编辑了以下代码,使其适用于所有Bootstrap下拉列表,因为它最初是从这里开始的:Preventing bootstrap dropdown from closing on click我个人更喜欢这种方式,因为它使用内置的Bootstrap下拉列表事件,可以在这里找到:http://getbootstrap.com/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;
}
});
});
答案 2 :(得分:1)
点击侧边菜单
不关闭$(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;
}
});
});
答案 3 :(得分:0)
您可以暂时停用下拉功能。这是一种解决方法。
下拉菜单中的输入字段示例:
//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');
});
这可用于任何可点击的内容,您可以单独定义单击的项目可以关闭或不关闭下拉菜单。