webentwicklung-frage-antwort-db.com.de

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

Ich benutze ein Bootstrap-Dropdown als Warenkorb. Im Warenkorb befindet sich ein Button "Produkt entfernen" (ein Link). Wenn ich darauf klicke, entfernt mein Warenkorbskript das Produkt, aber das Menü wird ausgeblendet. Gibt es überhaupt einen Weg, 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, hat das Element mit class = "dropwdown-toggle" es zum Dropdown gemacht. Eine andere Idee war, dass ich es einfach per programmgesteuertem Klick wieder öffne. Wenn mir jemand erklären kann, wie man ein Bootstrap-Dropdownprogramm programmgesteuert öffnet, wäre das gut!

63
Marten Sytema

Entfernen Sie die Ausbreitung auf der Schaltfläche selbst wie folgt:

$('.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>
85
Andres Ilich

Diese Antwort ist nur eine Nebenerwägung der akzeptierten Antwort. Dank des OP und Andres für dieses Q & A wurde mein Problem gelöst. Später brauchte ich jedoch etwas, das mit dynamisch hinzugefügten Elementen in meinem Dropdown-Menü funktionierte. Jeder, der auf dieses Problem stößt, könnte an einer Variante der Andres-Lösung interessiert sein, die sowohl mit den ursprünglichen Elementen als auch mit Elementen funktioniert, die nach dem Laden der Seite zum Dropdown hinzugefügt werden:

$(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 einfach das data-keepOpenOnClick-Attribut an eine beliebige Stelle in einem der <li>-Tags oder seinen untergeordneten Elementen ein, abhängig von Ihrer Situation. 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>
31
DonVaughn

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

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

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

Also das hat für mich am besten funktioniert:

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

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

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

Sie können [data-toggle="collapse"] durch das ersetzen, was Sie nicht mehr schließen möchten, ähnlich wie @DonamiteIsTnt eine Eigenschaft dazu hinzugefügt hat.

2
Astockwell

Ich habe einige Codezeilen geschrieben, die dafür sorgen, dass er so perfekt funktioniert, wie wir es brauchen, und mehr Kontrolle darüber hat:

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

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

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

0
Masamoto Miyata