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

85

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!

jquery  twitter-bootstrap 
— Marder Sytema
quelle
1
Ich sehe, Sie haben bereits eine Antwort, aber es gibt einen viel einfacheren Weg. Wickeln Sie einfach den Inhalt des Menüs in ein Formular-Tag. Das ist es. Also statt ul.dropdown-menuverwenden form.dropdown-menu>ul.
— Rdumont

Antworten:

99

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>
— Andres Ilich
quelle
Okay, das funktioniert, aber jetzt funktioniert die Schaltfläche zum Entfernen nicht mehr, was ich mir selbst gedacht hätte. Wahrscheinlich muss ich das Div programmgesteuert wieder öffnen. Irgendeine Idee, wie das geht?
— Marten Sytema
@MartenSytema, das hängt alles davon ab, wie Sie die Produkte aus dem Menü entfernen. Nehmen Sie zum Beispiel Folgendes : jsfiddle.net/andresilich/E9mpu. Beachten Sie , wie ich die .stopPropagation()Methode zusammen mit dem Entfernungsskript implementiert habe .
— Andres Ilich
Vielen Dank für Ihre Hilfe! Das einzige Problem besteht darin, dass ich die Live-jquery-Methode verwenden muss, um das Klickereignis zu binden, und wie jQuery sagt: Da die .live () -Methode Ereignisse behandelt, sobald sie an den Anfang des Dokuments weitergegeben wurden, ist dies nicht möglich Stoppen Sie die Verbreitung von Live-Events. Link
— Marten Sytema
@MartenSytema beide Methoden machen das gleiche. Außerdem .live()wurde ab jQuery Version 1.7 veraltet.
— Andres Ilich
@MartenSytema vergessen zu erwähnen, .live()wurde ersetzt durch .on().
— Andres Ilich
35

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>
— Don Vaughn
quelle
18

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>
— Hugo Mota
quelle
1
Ich weiß nicht wie, aber das funktioniert und sollte die beste Antwort sein.
— Dimitri Mostrey
Vielen Dank, dass Sie tatsächlich eine Antwort gegeben haben, die jQuery nicht verwendet! Klappt wunderbar.
— Mladen Ristic
13

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

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 .

— Masamoto Miyata
quelle
2

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.

— Astockwell
quelle
1

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);
});
— user2991574
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.