jQuery 单击时保持 Bootstrap 下拉菜单打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10480697/
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
Keep Bootstrap dropdown open on click
提问by Marten Sytema
I use a bootstrap dropdown as a shoppingcart. In the shopping cart is a 'remove product' button (a link). If I click it, my shoppingcart script removes the product, but the menu fades away. Is there anyway way to prevent this? I tried e.startPropagation, but that didn't seem to work:
我使用引导下拉菜单作为购物车。购物车中有一个“移除产品”按钮（一个链接）。如果我单击它，我的购物车脚本会删除该产品，但菜单会消失。有没有办法防止这种情况？我试过 e.startPropagation，但这似乎不起作用：
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li>
<span class="quantity">1x</span>
<span class="product-name">Test Product </span>
<span class="product-remove"><a class="removefromcart" packageid="4" href="#">x</a>
</span></li>
<li><a href="#">Total: € 43,00</a></li>
<li><a href="/checkout">Checkout</a></li>
</ul>
</li>
</ul>
As you can see tha element with class="dropwdown-toggle" made it a dropdown. Another idea was that I just reopen it on clicking programmatically. So if someone can explain me how to programmatically open a Bootstrap dropdown, it would help well!
如您所见，带有 class="dropwdown-toggle" 的元素使其成为下拉列表。另一个想法是我只是在以编程方式单击时重新打开它。因此，如果有人可以向我解释如何以编程方式打开 Bootstrap 下拉菜单，那将会很有帮助！
回答by Andres Ilich
Try removing the propagation on the button itself like so:
尝试删除按钮本身的传播，如下所示：
$('.dropdown-menu a.removefromcart').click(function(e) {
e.stopPropagation();
});
Edit
编辑
Here is a demo from the comments with the solution above:
以下是上述解决方案评论中的演示：
http://jsfiddle.net/andresilich/E9mpu/
http://jsfiddle.net/andresilich/E9mpu/
Relevant code:
相关代码：
JS
JS
$(".removefromcart").on("click", function(e){
var fadeDelete = $(this).parents('.product');
$(fadeDelete).fadeOut(function() {
$(this).remove();
});
e.stopPropagation();
});
HTML
HTML
<div id="shoppingcart" class="nav-collapse cart-collapse">
<ul class="nav pull-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
€ 43,00</a>
<ul class="dropdown-menu">
<li class="nav-header">Pakketten</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">1</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">10</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">8</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">3</span></span>
</li>
<li class="product">
<span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
<span class="product-name">Test Product </span>
<span class="quantity"><span class="badge badge-inverse">4</span></span>
</li>
<li class="divider"></li>
<li><a href="#">Total: € 43,00</a></li>
<li><a href="/checkout">Checkout</a></li>
</ul>
</li>
</ul>
回答by DonVaughn
This answer is just a sidenote to the accepted answer. Thanks to both the OP and Andres for this Q & A, it solved my problem. Later, however, I needed something that worked with dynamically added items in my dropdown. Anyone coming across this one might also be interested in a variation Andres' solution that works both with the initial elements as well as elements added to the dropdown after the page has loaded:
这个答案只是已接受答案的旁注。感谢 OP 和 Andres 对此问答，它解决了我的问题。然而，后来，我需要一些可以在我的下拉列表中动态添加项目的东西。任何遇到这个问题的人都可能对 Andres 的变体解决方案感兴趣，该解决方案既适用于初始元素，也适用于页面加载后添加到下拉列表中的元素：
$(function() {
$("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) {
e.stopPropagation();
});
});
Or, for dynamically created dropdown menus:
或者，对于动态创建的下拉菜单：
$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) {
e.stopPropagation();
});
Then just put the data-keepOpenOnClickattribute anywhere in any of the <li>tags or its child elements, depending on your situation. E.G.:
然后，根据您的情况，将该data-keepOpenOnClick属性放在任何<li>标签或其子元素中的任何位置。例如：
<ul class="dropdown-menu">
<li>
<-- EG 1: Do not close when clicking on the link -->
<a href="#" data-keepOpenOnClick>
...
</a>
</li>
<li>
<-- EG 2: Do not close when clicking the checkbox -->
<input type="checkbox" data-keepOpenOnClick> Pizza
</li>
<-- EG 3: Do not close when clicking the entire LI -->
<li data-keepOpenOnClick>
...
</li>
</ul>
回答by Hugo Mota
On bootstrap 4, when you put a form inside the dropdown menu, it won't collapse when clicking inside of it.
在引导程序 4 中，当您将表单放入下拉菜单中时，单击它内部时它不会折叠。
So this worked best for me:
所以这对我来说效果最好：
<div class="dropdown">
<!-- toggle button/link -->
<div class="dropdown-menu">
<form>
<!-- content -->
</form>
</div>
</div>
回答by Hugo Mota
In short, You can try this. It is working for me.
总之，你可以试试这个。它对我有用。
<span class="product-remove">
<a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a>
</span>
回答by Masamoto Miyata
The menu opens when you give showclass to the menu, so you can implement the function yourself without using data-toggle="dropdown".
当您为菜单提供show类时菜单会打开，因此您可以自己实现该功能而无需使用data-toggle="dropdown".
<div class="dropdown">
<button class="btn btn-secondary" type="button">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div id="overlay"></div>
#overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
display: none;
}
#overlay.show{
display: block;
}
.dropdown-menu{
z-index: 1001;
}
$('button, #overlay').on('click', function(){
$('.dropdown-menu, #overlay').toggleClass('show')
})
Try this in codepen.
在codepen 中试试这个。
回答by Astockwell
I was having the same problem with an accordion/toggle sub-menu that was nested within a dropdown-menu in Bootstrap 3. Borrowed this syntax from the source codeto stop all collapse toggles from closing the dropdown:
我在 Bootstrap 3 的下拉菜单中嵌套的手风琴/切换子菜单遇到了同样的问题。从源代码中借用了这个语法来阻止所有折叠切换关闭下拉菜单：
$(document).on(
'click.bs.dropdown.data-api',
'[data-toggle="collapse"]',
function (e) { e.stopPropagation() }
);
You can replace [data-toggle="collapse"]with whatever you want to stop closing the form, similar to how @DonamiteIsTnt added a property to do so.
您可以替换[data-toggle="collapse"]为您想要停止关闭表单的任何内容，类似于@DonamiteIsTnt 添加一个属性来这样做。
回答by user2991574
I wrote some lines of code that make it works as perfect as we need with more of control on it:
我编写了一些代码行，使其能够像我们需要的那样完美运行，并对其进行更多控制：
$(".dropdown_select").on('hidden.bs.dropdown', function () {
if($(this).attr("keep-open") == "true") {
$(this).addClass("open");
$(this).removeAttr("keep-open");
}
});
$(".dropdown_select ul li").bind("click", function (e) {
// DO WHATEVER YOU WANT
$(".dropdown_select").attr("keep-open", true);
});
