Lassen Sie das Bootstrap-Dropdown-Menü beim Klicken geöffnet

Ich benutze ein Bootstrap-Dropdown als Einkaufswagen. Im Warenkorb befindet sich eine Schaltfläche "Produkt entfernen" (ein Link). Wenn ich darauf klicke, entfernt mein Shoppingcart-Skript das Produkt, aber das Menü wird ausgeblendet. Gibt es überhaupt eine Möglichkeit, dies zu verhindern? Ich habe e.startPropagation ausprobiert, aber das schien nicht zu funktionieren:

<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 sehen können, hat das Element mit class = "dropwdown-toggle" es zu einem Dropdown gemacht. Eine andere Idee war, dass ich es einfach wieder öffne, wenn ich programmgesteuert klicke. Wenn mir jemand erklären kann, wie man ein Bootstrap-Dropdown-Menü programmgesteuert öffnet, ist das hilfreich!

Versuchen Sie, die Ausbreitung auf der Schaltfläche selbst wie folgt zu entfernen:

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

Bearbeiten

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

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>

Diese Antwort ist nur eine Nebenbemerkung zur akzeptierten Antwort. Dank sowohl des OP als auch von Andres für diese Fragen und Antworten hat es mein Problem gelöst. Später brauchte ich jedoch etwas, das mit dynamisch hinzugefügten Elementen in meiner Dropdown-Liste funktioniert. Jeder, der auf diese stößt, könnte auch an einer Variation der Andres-Lösung interessiert sein, die sowohl mit den Anfangselementen als auch mit Elementen funktioniert, die dem Dropdown-Menü nach dem Laden der Seite hinzugefügt wurden:

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

Fügen Sie das data-keepOpenOnClickAttribut dann <li>je nach Situation an einer beliebigen Stelle in einem der Tags oder seinen untergeordneten Elementen ein. Z.B:

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

Wenn Sie in Bootstrap 4 ein Formular in das Dropdown-Menü einfügen, wird es beim Klicken nicht zusammenfallen.

Das hat also am besten für mich funktioniert:

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

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>

Das Menü wird geöffnet, wenn Sie showdem Menü eine Klasse geben , sodass Sie die Funktion selbst implementieren können, ohne sie zu verwenden data-toggle="dropdown".

<div class="dropdown">
  <button class="btn btn-secondary" type="button">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<div id="overlay"></div>

#overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

#overlay.show{
  display: block;
}

.dropdown-menu{
  z-index: 1001;
}

$('button, #overlay').on('click', function(){
  $('.dropdown-menu, #overlay').toggleClass('show')
})

Versuchen Sie dies in Codepen .

Ich hatte das gleiche Problem mit einem Akkordeon / Umschalt-Untermenü, das in einem Dropdown-Menü in Bootstrap 3 verschachtelt war. Diese Syntax wurde aus dem Quellcode ausgeliehen , um zu verhindern, dass alle Zusammenbruch- Umschalter das Dropdown-Menü schließen:

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

Sie können [data-toggle="collapse"]das Formular durch alles ersetzen, was Sie beenden möchten, ähnlich wie @DonamiteIsTnt eine Eigenschaft hinzugefügt hat, um dies zu tun.

Ich habe einige Codezeilen geschrieben, mit denen es so perfekt funktioniert, wie wir es brauchen, mit mehr Kontrolle darüber:

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