保持引导下拉菜单点击
我使用引导下拉菜单作为购物车。 购物车中有一个“删除产品”button（一个链接）。 如果我点击它，我的购物车脚本删除产品，但菜单消失。 有没有办法来防止这种情况？ 我试过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> 正如你所看到的class =“dropwdown-toggle”的元素使其成为下拉菜单。 另一个想法是，我只是重新打开它通过点击编程。 所以，如果有人能解释我如何以编程方式打开引导下拉，这将有所帮助！
尝试去除button本身的传播，如下所示：
$('.dropdown-menu a.removefromcart').click(function(e) { e.stopPropagation(); });
编辑
以上是上述解决scheme的注释示例：
http://jsfiddle.net/andresilich/E9mpu/
相关代码：
JS
$(".removefromcart").on("click", function(e){ var fadeDelete = $(this).parents('.product'); $(fadeDelete).fadeOut(function() { $(this).remove(); }); e.stopPropagation(); });
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>
这个答案只是接受答案的一个旁注。 感谢OP和Andres为这个问答，它解决了我的问题。 不过后来，我需要一些能够在下拉列表中dynamic添加项目的工具。 任何人都可能会遇到这个问题，也可能会对Andres的解决scheme感兴趣，这个解决scheme既可以与初始元素一起工作，也可以在页面加载后添加到下拉列表中：
$(function() { $("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) { e.stopPropagation(); }); });
或者，对于dynamic创build的下拉菜单：
$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) { e.stopPropagation(); });
然后，只要将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>
总之，你可以试试这个。 它正在为我工作。
<span class="product-remove"> <a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a> </span>
我在Bootstrap 3的下拉菜单中embedded了一个手风琴/切换子菜单的问题。从源代码中借用了这个语法来停止closures下拉菜单中的所有折叠切换：
$(document).on( 'click.bs.dropdown.data-api', '[data-toggle="collapse"]', function (e) { e.stopPropagation() } );
您可以将[data-toggle="collapse"]replace为您要停止closures表单的任何内容，类似于@DonamiteIsTnt添加属性的方式。
我写了一些代码行，使其能够像我们所需要的那样完美工作，并且拥有更多的控制权：
$(".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); });
