twitter-bootstrap 单击该项目后，BootStrap3 保持下拉菜单打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21982308/
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
BootStrap3 keep the dropdown menu open after click on the item
提问by Hetfield Joe
I'm using bootstrap3.0, with it excellent drop-down menu.
我正在使用 bootstrap3.0，它具有出色的下拉菜单。
If I click out side of the drop-down menu the menu will disappear, and this is quite right.
如果我单击下拉菜单的外侧，菜单将消失，这是正确的。
but when I click on the item of the drop-down menu, it will disappear as well. this is not that right I think, and there is no options can control it's toggle behavior. (I need the menu keep open when I click on the items, like the facebook notification menu)
但是当我点击下拉菜单的项目时，它也会消失。我认为这不是正确的，并且没有选项可以控制它的切换行为。（当我点击项目时，我需要菜单保持打开状态，比如 Facebook 通知菜单）
so I think I have to modify the source of bootstrap, which I don't really want to. so before I touch the source, I want to know is there any good work-around? if not, How to change the source for minimum impact of bootstrap?
所以我想我必须修改引导程序的源代码，我真的不想这样做。所以在我接触源之前，我想知道有什么好的解决方法吗？如果没有，如何更改源以最小化引导程序的影响？
thanks for any idea.
感谢您的任何想法。
回答by Zim
Here is one way to keep the dropdown open after click...
这是单击后保持下拉菜单打开的一种方法...
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
Demo: http://www.bootply.com/116350
演示：http: //www.bootply.com/116350
Another option is to handle the click event like this..
另一种选择是像这样处理点击事件..
$('#myDropdown .dropdown-menu').on({
"click":function(e){
e.stopPropagation();
}
});
回答by Strika
The accepted answer is very helpful. I want to provide another perspective - when a drop down menu should stay open when only certain items are clicked.
接受的答案非常有帮助。我想提供另一种观点 - 当仅单击某些项目时下拉菜单应保持打开状态。
// A utility for keeping a Bootstrap drop down menu open after a link is
// clicked
//
// Usage:
//
// <div class="dropdown">
// <a href="" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
// Dropdown trigger <span class="caret"></span>
// </a>
//
// <ul class="dropdown-menu" aria-labelledby="dLabel">
// <li><a href="">Edit</a></li>
// <li><a href="" keep-menu-open="true">Delete</a></li>
// </ul>
// </div>
$(".dropdown .dropdown-menu a").on("click", function(e) {
var keepMenuOpen = $(this).data("keep-menu-open"),
$dropdown = $(this).parents(".dropdown");
$dropdown.data("keep-menu-open", keepMenuOpen);
});
$(".dropdown").on("hide.bs.dropdown", function(e) {
var keepMenuOpen = $(this).data("keep-menu-open");
$(this).removeData("keep-menu-open");
return keepMenuOpen !== true;
});
回答by Enda Molloy
In vanilla JS
在香草 JS 中
document.getElementById('myDropdown').addEventListener('click', function (event) {
event.stopPropagation();
});
