Bootstrap Dropdown auf Klick geöffnet

Question

Ich verwende ein Bootstrap-Dropdown als Einkaufskorb. Im Einkaufswagen befindet sich ein "Produkt entfernen" -Knopf (ein Link). Wenn ich darauf klicke, entfernt mein Einkaufswagen-Skript das Produkt, aber das Menü wird ausgeblendet. Gibt es einen Weg dies zu verhindern? Ich versuchte e.startPropagation, aber das hat nicht zu funktionieren scheint:

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

Wie Sie tha Element mit class = "dropwdown-Toggle" sehen können, machte es ein Dropdown-Menü. Eine andere Idee war, dass ich sie beim programmgesteuerten Klicken wieder öffne. Wenn mir jemand erklären kann, wie man ein Bootstrap-Drop-Down-Programm programmatisch öffnet, würde das gut helfen!

Answer 1

Versuchen Sie, die Ausbreitung auf die Schaltfläche Entfernen sich wie folgt:

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

bearbeiten

Hier ist eine Demo aus den Kommentaren mit der Lösung oben:

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

Relevanter Code:

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

Diese Antwort ist nur eine Bemerkung am Rande auf die akzeptierte Antwort. Dank sowohl der OP und Andres für diese Q & A, löste es mein Problem. Später benötigte ich jedoch etwas, das mit dynamisch hinzugefügten Elementen in meinem Dropdown funktionierte. Wer über diese interessiert vielleicht auch in einer Variation Andres Lösung kommen, die sowohl mit den ersten Elemente sowie Elemente hinzugefügt, um die Drop-Down funktioniert, nachdem die Seite geladen wurde:

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

Oder für dynamisch erstellte Dropdown-Menüs :

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

Dann setzen Sie einfach die data-keepOpenOnClick irgendwo in einem der <li> Tags oder seine untergeordneten Elemente Attribut, Ihre Situation je nach. Beispiel:

<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

Ich war das gleiche Problem mit einem Akkordeon/wechseln Untermenü, die 3. Borrowed dieser Syntax aus den source code in einem Dropdown-Menü in Bootstrap verschachtelt wurde alle Zusammenbruch zu stoppen schaltet aus der Drop-Down-Schließen :

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

Sie können ersetzen [data-toggle="collapse"] mit dem, was Sie das Formular zu schließen, ähnlich wie @DonamiteIsTnt eine Eigenschaft hinzugefügt zu tun, damit aufhören wollen.

Answer 4

Kurz gesagt, Sie können dies versuchen. Es funktioniert für mich.

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

Answer 5

Ich schrieb ein paar Zeilen Code, es funktioniert so perfekt, wie wir mit mehr Kontrolle über sie brauchen:

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

Auf Bootstrap-4, wenn Sie ein Formular in dem Drop-Down-Menü setzen, Es wird nicht kollabieren, wenn Sie darin klicken.

So arbeitete das Beste für mich:

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