我使用 bootstrap 下拉菜单作为购物车.购物车中有一个"删除产品"按钮(链接).如果我点击它,我的shoppingcart脚本会删除该产品,但菜单会消失.有没有办法防止这种情况发生?我试过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>

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 删除按钮本身的传播,如下所示:

$('.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/

相关代码:

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>

Jquery相关问答推荐

如何根据另一个 radio Select 并切换?

如果链接包含多个关键字,jQuery 将 HTML 添加到链接

JavaScript 或 jQuery 字符串以实用函数结尾

如何使用 jQuery Select 所有复选框?

在 Javascript 中,字典理解或 Object `map`

jQuery 序列化不注册复选框

jQuery 对象和 DOM 元素

JavaScript / jQuery:测试窗口是否有焦点

带有 jquery.animate() 的 CSS 旋转跨浏览器

如何检测 window.print() 完成

jQuery Select 器中前导冒号的目的是什么?

jQuery XML 错误请求的资源上不存在‘Access-Control-Allow-Origin’标头.

Jquery:如何判断元素是否具有某些 css 类/样式

按文本 Select 链接(完全匹配)

如何让 JavaScript/jQuery Intellisense 在 Visual Studio 2008 中工作?

Backbone.js - 事件,知道点击了什么

如何在纯 JavaScript 中模拟鼠标悬停以激活 CSS:悬停?

我可以通过 JavaScript 禁用 CSS :hover 效果吗?

添加到数组 jQuery

如何在 jQuery 中取消绑定悬停?