Tieni aperto il menu a discesa Bootstrap al clic

Uso un menu a discesa bootstrap come carrello della spesa. Nel carrello è presente un pulsante "rimuovi prodotto" (un collegamento). Se lo clicco, il mio script carrello della spesa rimuove il prodotto, ma il menu scompare. C'è comunque un modo per impedirlo? Ho provato e.startPropagation, ma non sembra funzionare:

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

Come puoi vedere, l'elemento con class = "dropwdown-toggle" lo ha reso un menu a discesa. Un'altra idea era che l'ho riaperto semplicemente facendo clic a livello di programmazione. Quindi, se qualcuno può spiegarmi come aprire a livello di programmazione un menu a discesa Bootstrap, sarebbe di grande aiuto!

Prova a rimuovere la propagazione sul pulsante stesso in questo modo:

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

modificare

Ecco una demo dai commenti con la soluzione sopra:

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

Codice rilevante:

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>

Questa risposta è solo una nota a margine della risposta accettata. Grazie sia all'OP che ad Andres per queste domande e risposte, ha risolto il mio problema. Successivamente, tuttavia, avevo bisogno di qualcosa che funzionasse con gli elementi aggiunti dinamicamente nel mio menu a discesa. Chiunque si imbatta in questo potrebbe anche essere interessato a una variante della soluzione di Andres che funziona sia con gli elementi iniziali che con gli elementi aggiunti al menu a discesa dopo che la pagina è stata caricata:

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

Oppure, per i menu a discesa creati dinamicamente:

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

Quindi metti l' data-keepOpenOnClickattributo ovunque in uno qualsiasi dei <li>tag o dei suoi elementi figlio, a seconda della tua situazione. PER ESEMPIO:

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

In bootstrap 4, quando inserisci un modulo nel menu a discesa, non verrà compresso quando fai clic al suo interno.

Quindi questo ha funzionato meglio per me:

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

In breve, puoi provare questo. Sta funzionando per me.

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

Il menu si apre quando dai una showclasse al menu, quindi puoi implementare la funzione da solo senza usare 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')
})

Prova questo in codepen .

Ho riscontrato lo stesso problema con un sottomenu a fisarmonica / attivazione / disattivazione che era annidato in un menu a discesa in Bootstrap 3. Ho preso in prestito questa sintassi dal codice sorgente per impedire a tutti gli interruttori di compressione di chiudere il menu a discesa:

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

Puoi sostituire [data-toggle="collapse"]con qualsiasi cosa tu voglia interrompere la chiusura del modulo, in modo simile a come @DonamiteIsTnt ha aggiunto una proprietà per farlo.

Ho scritto alcune righe di codice che lo rendono perfetto quanto ci serve con più controllo su di esso:

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