Javascript 单击时 Bootstrap 下拉菜单关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10863821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap dropdown closing when clicked
提问by Sorin Cioban
I put a form inside a bootstrap dropdown, but when I click any of the fields in the form, the dropdown goes away. I have this piece of code but I don't know where to put it to prevent the dropdown disappearing.
我将一个表单放在引导程序下拉列表中，但是当我单击表单中的任何字段时，下拉列表消失了。我有这段代码，但我不知道把它放在哪里以防止下拉菜单消失。
$(function test() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
Could someone please tell me where I should put this? I tried in the bootstrap-dropdown, I tried within the HTML but it still doesn't work.
有人可以告诉我应该把这个放在哪里吗？我在 bootstrap-dropdown 中尝试过，在 HTML 中尝试过，但仍然无法正常工作。
采纳答案by Shiplu
Simply use this example.This solution works for me.
只需使用此示例。此解决方案适用于我。
<script type="text/javascript">
window.addEvent('domready',function() {
Element.prototype.hide = function() {
$(function () {
// replace your tab id with myTab
//<ul id="myTab" class="nav nav-tabs">
$('#myTab li:eq(1) a').tab('show');
});
};
});
</script>
Hope it'll help. Thanks.
希望它会有所帮助。谢谢。
回答by Andres Ilich
You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.
你可以一起省略下拉调用，引导下拉菜单没有它。确保正确包装脚本，您可以将其包含在页面的标题或正文中，尽管我个人更喜欢将其放置在页面的正文中。
JS
JS
<script type="text/javascript">
$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
e.stopPropagation();
});
</script>
回答by oleg
If you want to stop closing only some of dropdown menu, not all of them, then just add an additional class to your ul block:
如果您只想停止关闭一些下拉菜单，而不是全部，那么只需向您的 ul 块添加一个额外的类：
<ul class="dropdown-menu keep-open-on-click">
And use this code:
并使用此代码：
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
回答by lavrik
Time passed since answer had been accepted, but if you want to keep the dropdown opened, if it acts like a kind of dialog, the best way i think is:
自从答案被接受以来已经过去了一段时间，但是如果你想保持下拉菜单打开，如果它像一种对话，我认为最好的方法是：
$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
if ($.contains(dropdown, e.target)) {
e.preventDefault();
//or return false;
}
});
回答by Vishnu T Asok
You need to stop event from bubbling up the DOM tree:
您需要阻止事件冒泡 DOM 树：
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
event.stopPropagation 阻止事件到达最终由 Bootstrap 隐藏菜单处理的节点。
回答by manuelprojects
This works for my (lateral sidebar opening a simple link with bootstrap toggle)
这适用于我的（侧边栏打开一个带有引导程序切换的简单链接）
$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
e.stopImmediatePropagation();
});
回答by River CR Phoenix
Put
放
<script type="text/javascript">
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
</script>
on the original answer, remove all the classes, and just put the ".dropdown-menu" class, it worked for me. i have an input field inside the dropdown menu.
在原始答案中，删除所有类，然后放置“.dropdown-menu”类，它对我有用。我在下拉菜单中有一个输入字段。
回答by usugarbage
Thank you for the above answer, I was having the same issue w/ submenus under the dropdown menus. Using the above solution I was able to solve the problem for this as well.
感谢您的上述回答，我在下拉菜单下的子菜单中遇到了同样的问题。使用上述解决方案，我也能够解决这个问题。
$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{
e.stopPropagation();
});
回答by Timofey Novitskiy
If you look to the bottom of sources of dropdown widget, you will see this:
如果您查看下拉小部件来源的底部，您将看到：
$(document)
.on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
e.stopPropagation()
})
So you have the following choices:
所以你有以下选择：
- Simply wrap yor dropdown with form
- Or you can add event listener for click event of .dropdown YOUR_SELECTOR
- 简单地用表格包裹你的下拉菜单
- 或者你可以为.dropdown YOUR_SELECTOR 的点击事件添加事件监听器
$(document)
.on('click.my', '.dropdown some_selector', function(e) {
e.stopPropagation()
})
