Biarkan dropdown Bootstrap terbuka saat diklik

Saya menggunakan dropdown bootstrap sebagai kereta belanja. Di keranjang belanja ada tombol 'hapus produk' (tautan). Jika saya mengkliknya, skrip kereta belanja saya menghapus produk, tetapi menu memudar. Apakah ada cara untuk mencegahnya? Saya mencoba e.startPropagation, tetapi tampaknya tidak berhasil:

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

Seperti yang Anda lihat, elemen dengan class = "dropwdown-toggle" membuatnya menjadi dropdown. Ide lainnya adalah saya hanya membukanya kembali dengan mengklik secara terprogram. Jadi, jika seseorang dapat menjelaskan kepada saya cara membuka dropdown Bootstrap secara terprogram, itu akan membantu dengan baik!

Coba hapus propagasi pada tombol itu sendiri seperti:

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

Sunting

Berikut ini demo dari komentar dengan solusi di atas:

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

Kode yang relevan:

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>

Jawaban ini hanyalah sidenote dari jawaban yang diterima. Terima kasih kepada OP dan Andres untuk Tanya Jawab ini, ini menyelesaikan masalah saya. Namun, kemudian, saya membutuhkan sesuatu yang berfungsi dengan item yang ditambahkan secara dinamis di dropdown saya. Siapa pun yang menemukan yang satu ini mungkin juga tertarik dengan variasi solusi Andres yang berfungsi baik dengan elemen awal serta elemen yang ditambahkan ke drop-down setelah halaman dimuat:

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

Atau, untuk menu tarik-turun yang dibuat secara dinamis:

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

Kemudian letakkan data-keepOpenOnClickatribut di mana saja di salah satu <li>tag atau elemen turunannya, bergantung pada situasi Anda. MISALNYA:

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

Pada bootstrap 4, saat Anda meletakkan formulir di dalam menu dropdown, formulir tidak akan runtuh saat mengklik di dalamnya.

Jadi ini paling berhasil untuk saya:

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

Singkatnya, Anda bisa mencoba ini. Ini bekerja untuk saya.

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

Menu terbuka saat Anda memberikan showkelas ke menu, sehingga Anda dapat mengimplementasikan sendiri fungsi tersebut tanpa menggunakan 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')
})

Coba ini di codepen .

Saya mengalami masalah yang sama dengan sub-menu akordeon / toggle yang bersarang dalam menu dropdown di Bootstrap 3. Meminjam sintaks ini dari kode sumber untuk menghentikan semua toggle yang diciutkan agar tidak menutup dropdown:

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

Anda dapat mengganti [data-toggle="collapse"]dengan apa pun yang Anda inginkan untuk berhenti menutup formulir, mirip dengan cara @DonamiteIsTnt menambahkan properti untuk melakukannya.

Saya menulis beberapa baris kode yang membuatnya berfungsi sesempurna yang kita butuhkan dengan lebih banyak kontrol di atasnya:

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