保持引导下拉菜单点击

我使用引导下拉菜单作为购物车。 购物车中有一个“删除产品”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: &acirc;&sbquo;&not; 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: &euro; 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: &acirc;&sbquo;&not; 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: &euro; 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); });