Javascript 防止启动下拉菜单在单击时关闭
我的菜单使用Bootstrap3,我无法阻止下拉菜单在单击时关闭。我怎么做Javascript 防止启动下拉菜单在单击时关闭,javascript,twitter-bootstrap,drop-down-menu,jsfiddle,Javascript,Twitter Bootstrap,Drop Down Menu,Jsfiddle,我的菜单使用Bootstrap3,我无法阻止下拉菜单在单击时关闭。我怎么做 您需要阻止事件在DOM树中冒泡: $('.dropdown-menu').click(function(e) { e.stopPropagation(); }); 防止事件到达最终由引导隐藏菜单处理的节点 演示:我认为这应该是一个更合适的解决方案,因为在单击事件上停止传播有时可能会在以后的开发中导致问题。您可以在这里阅读更多内容:相反,此解决方案会停止引导隐藏(hide.bs.dropdown)事件上的传播,
您需要阻止事件在DOM树中冒泡:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
防止事件到达最终由引导隐藏菜单处理的节点
演示:我认为这应该是一个更合适的解决方案,因为在单击事件上停止传播有时可能会在以后的开发中导致问题。您可以在这里阅读更多内容:相反,此解决方案会停止引导隐藏(hide.bs.dropdown)事件上的传播,从而停止继续执行隐藏(hidden.bs.dropdown)事件 以下代码是我自己编写并编辑的,以使其适用于所有引导下拉列表,正如它最初从这里获得的一样:我个人更喜欢这种方式,因为它使用内置的引导下拉事件,可以在这里找到:
不在“单击”侧菜单中关闭
$(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;
}
});
});
您可以暂时禁用下拉功能。这是一个解决办法 下拉式“菜单”中有输入字段的示例:
这可以用于任何可单击的项目,您可以单独定义单击哪些项目可以关闭或不关闭下拉菜单 很好。但它只适用于菜单链接。点击身体上的其他地方。你们想让菜单永远不关闭吗?是的,只有在菜单没有下拉菜单的情况下。所以,若你们点击外部,菜单永远不关闭吗?是的,若你们点击外部菜单,永远不关闭接受的答案对我不起作用。它可以防止关闭,但也可以防止下拉菜单中的控件中的点击。这个解决方案正是我想要的,这正是这个问题所要求的。谢谢仅供参考。谢谢!:)如果您在下拉菜单中有切换开关或其他按钮,这是最佳选项。谢谢+5有关问题:
$(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');
});