Bootstrap açılır menüsünü açık tut seçeneğine tıklayın

Question

Alışveriş çantası olarak bir önyükleme açılır menüsü kullanıyorum. Alışveriş sepetinde bir 'ürün kaldır' düğmesi (bir bağlantı) var. Ona tıklarsam, shoppingcart komutum ürünü kaldırır, ancak menü kaybolur. Bunu engellemenin bir yolu var mı? Ben e.startPropagation çalıştı, ancak bu işe görünmüyordu: Eğer class = "dropwdown-toggle" ile tha eleman görebileceğiniz gibi

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

bir açılır yaptı. Başka bir fikir, program aracılığıyla tıklatıldığında yeniden açmamdı. Öyleyse birisi bir Bootstrap açılır menüsünün nasıl programlanabilir bir şekilde açılacağını açıklayabilirse, yardımcı olur!

Answer 1

şöyle düğmenin üzerine yayılmasını kaldırmayı deneyin:

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

:

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

Edit Burada

Yukarıdaki çözüm yorumlardan bir demo İlgili kod:

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> 

Answer 2

Bu cevap kabul cevaba sadece sidenote olduğunu. Bu Q & A için hem OP hem de Andres'e teşekkürler, sorunumu çözdü. Ancak, daha sonra, açılır kutumda dinamik olarak eklenen öğelerle çalışan bir şeye ihtiyacım vardı. dinamik olarak oluşturulan açılır menüler için,

$(function() { 
    $("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) { 
     e.stopPropagation(); 
    }); 
}); 

Veya: sayfa yüklendikten sonra bu bir genelinde geliyor herkes de açılan eklenen elemanlar yanı sıra başlangıç ​​öğesi olan hem çalışan bir varyasyon Andres' çözümü ilginizi çekebilir :

$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) { 
    e.stopPropagation(); 
}); 

Sonra sadece durumunuza bağlı olarak, data-keepOpenOnClick <li> etiketleri veya alt öğelerinden herhangi bir yerde bağlıyor koydu. EG:

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

Answer 3

tüm çöküşü durdurmak için source code bu sözdizimi Ödünç Bootstrap 3'te bir açılan menü içinde yuvalanmış açılan kapatmasını değiştirir edildi akordeon/geçiş alt menüsü ile de aynı sorunu vardı :

$(document).on(
    'click.bs.dropdown.data-api', 
    '[data-toggle="collapse"]', 
    function (e) { e.stopPropagation() } 
); 

sen formunu kapanış durdurmak istediğini ile [data-toggle="collapse"] yerine geçebilir, @DonamiteIsTnt bir özellik ekledi şekline benzer bunu.

Answer 4

Kısacası, Bunu deneyebilirsiniz. Benim için çalışıyor.

<span class="product-remove"> 
    <a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a> 
    </span> 

Answer 5

Ben bunun üzerinde kontrolün daha fazlasıyla ihtiyaç kadar mükemmel çalışır hale kod bazı satırları yazdı:

bootstrap 4 günü

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

Answer 6

, açılır menüden içinde form koyduğumuzda, İçine tıklandığında daralmaz.

Yani bu benim için en iyi çalıştı:

<div class="dropdown"> 
    <!-- toggle button/link --> 
    <div class="dropdown-menu"> 
     <form> 
      <!-- content --> 
     </form> 
    </div> 
</div>