Po kliknięciu nie otwieraj menu Bootstrap

Używam menu startowego jako koszyka na zakupy. W koszyku znajduje się przycisk „usuń produkt” (link). Jeśli go kliknę, mój skrypt shoppingcart usuwa produkt, ale menu znika. Czy jest jakiś sposób, aby temu zapobiec? Próbowałem e.startPropagation, ale to nie zadziałało:

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

Jak widać, element z class = "dropwdown-toggle" utworzył menu. Innym pomysłem było ponowne otwarcie go po kliknięciu programowym. Więc jeśli ktoś może mi wyjaśnić, jak programowo otworzyć menu rozwijane Bootstrap, byłoby dobrze!

Spróbuj usunąć propagację na samym przycisku w następujący sposób:

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

Edytować

Oto demo z komentarzy z rozwiązaniem powyżej:

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

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

Ta odpowiedź jest tylko dodatkiem do zaakceptowanej odpowiedzi. Dzięki zarówno OP, jak i Andresowi za te pytania i odpowiedzi, rozwiązało mój problem. Później jednak potrzebowałem czegoś, co działałoby z dynamicznie dodawanymi elementami w moim menu. Każdy, kto natknie się na to, może być również zainteresowany odmianą rozwiązania Andresa, która działa zarówno z elementami początkowymi, jak i elementami dodanymi do menu po załadowaniu strony:

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

Lub w przypadku dynamicznie tworzonych menu rozwijanych:

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

Następnie po prostu umieść data-keepOpenOnClickatrybut w dowolnym miejscu w dowolnym <li>tagu lub jego elementach podrzędnych, w zależności od sytuacji. NA PRZYKŁAD:

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

W bootstrap 4, kiedy umieścisz formularz w menu rozwijanym, nie zwinie się on po kliknięciu w nim.

Więc to zadziałało najlepiej dla mnie:

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

Krótko mówiąc, możesz tego spróbować. To działa dla mnie.

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

Menu otwiera się, gdy nadasz mu showklasę, więc możesz samodzielnie zaimplementować funkcję bez użycia 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')
})

Spróbuj tego w codepen .

Miałem ten sam problem z podmenu akordeon / przełączanie, które było zagnieżdżone w menu rozwijanym w Bootstrap 3. Zapożyczyłem tę składnię z kodu źródłowego, aby zatrzymać wszystkie przełączniki zwijania przed zamknięciem listy rozwijanej:

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

Możesz zamienić na [data-toggle="collapse"]wszystko, co chcesz, aby zatrzymać zamykanie formularza, podobnie jak @DonamiteIsTnt dodał właściwość, aby to zrobić.

Napisałem kilka wierszy kodu, które sprawiają, że działa tak idealnie, jak potrzebujemy, z większą kontrolą nad nim:

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