单击保持打开Bootstrap下拉菜单 [英] Keep Bootstrap dropdown open on click

问题描述

我使用bootstrap下拉菜单作为购物车.购物车中有一个删除产品"按钮(链接).如果单击它，我的shoppingcart脚本会删除该产品，但菜单会消失.有什么办法可以防止这种情况吗?我尝试了e.startPropagation，但这似乎不起作用:

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:

<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>

您会看到tha元素的class ="dropwdown-toggle"使它成为了一个下拉列表.另一个想法是，我只是以编程方式单击将其重新打开.因此，如果有人可以向我解释如何以编程方式打开Bootstrap下拉菜单，那将会很有帮助！

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!

推荐答案

尝试删除按钮本身的传播，如下所示:

Try removing the propagation on the button itself like so:

$('.dropdown-menu a.removefromcart').click(function(e) {
    e.stopPropagation();
});

修改

以下是带有上述解决方案的评论中的演示:

Here is a demo from the comments with the solution above:

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>

这篇关于单击保持打开Bootstrap下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！