BootStrap3单击项目后保持下拉菜单打开
BootStrap3单击项目后保持下拉菜单打开
提问于 2014-02-24 16:18:20
我使用的是bootstrap3.0，它的下拉菜单很棒。
如果我点击下拉菜单的外部，菜单将会消失，这是非常正确的。
但当我点击下拉菜单的项目时，它也会消失。我认为这并不正确，而且没有任何选项可以控制它的切换行为。(我需要菜单在我单击项目时保持打开，如facebook通知菜单)
所以我想我必须修改bootstrap的源代码，我并不真的想这样做。所以在我接触源代码之前，我想知道有什么好的变通办法吗？如果不是，如何更改源代码以将引导的影响降至最低？
谢谢你的任何想法。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-02-24 22:57:17
以下是在单击后保持下拉菜单打开的一种方法...
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});演示：http://www.bootply.com/116350
另一种选择是像这样处理单击事件。
$('#myDropdown .dropdown-menu').on({
"click":function(e){
e.stopPropagation();
}
});Stack Overflow用户
发布于 2017-01-24 19:03:14
公认的答案是非常有帮助的。我想提供另一个视角--当只有某些项目被点击时，下拉菜单应该保持打开状态。
// 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;
});Stack Overflow用户
发布于 2018-03-03 23:14:59
在vanilla JS中
document.getElementById('myDropdown').addEventListener('click', function (event) {
event.stopPropagation();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21982308
复制相关文章
相似问题