Bootstrap açılan ' I aç

SORU

7 Mayıs 2012, PAZARTESİ

Bootstrap açılan ' I aç

Bir shoppingcart olarak bootstrap bir açılır kullanıyorum. Alışveriş sepeti bir 'ürün' düğmesi (bağlantı). çıkarın. Ben ona tıklarsanız, shoppingcart senaryomu ürünü kaldırır, ama menü kayboluyor. Yine de bunu önlemenin bir yolu var mı? E çalıştım.startPropagation, ama bu pek işe yaramadı:

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

"Dropwdown-toggle" a açılan yapılmış. sınıf tha eleman=gördüğünüz gibi Başka bir fikir sadece tıklayarak aracılığıyla yeniden oldu. Eğer biri açık Bootstrap açılan bir program aracılığıyla nasıl bana açıklayabilir eğer iyi yardımcı olacaktır!

CEVAP

7 Mayıs 2012, PAZARTESİ

Kendisi gibi böylece düğme: yayma kaldırmayı deneyin

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

Edit

İşte çözüm yukarıda: yorum bir demo

http://jsfiddle.net/andresilich/E9mpu/

İlgili kod:

$(".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>

Bunu Paylaş: