Tıklandığında Bootstrap açılır menüsünü açık tutun

Alışveriş arabası olarak bir bootstrap açılır menüsü kullanıyorum. Alışveriş sepetinde bir 'ürünü kaldır' düğmesi (bir bağlantı) vardır. Tıklarsam, alışveriş kartımın komut dosyası ürünü kaldırıyor, ancak menü kayboluyor. Bunu önlemenin bir yolu var mı? E.startPropagation'ı denedim ama işe yaramadı:

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

Gördüğünüz gibi class = "dropwdown-toggle" ile tha element onu bir açılır menü yaptı. Başka bir fikir, programlı olarak tıklayarak onu yeniden açmamdı. Öyleyse birisi bana bir Bootstrap açılır menüsünü programlı olarak nasıl açacağımı açıklayabilirse, bu çok yardımcı olur!

Düğmenin üzerindeki yayılımı şu şekilde kaldırmayı deneyin:

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

Düzenle

İşte yukarıdaki çözümle yorumlardan bir demo:

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

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

Bu cevap, kabul edilen cevabın sadece bir yan notudur. Bu soru ve cevap için hem OP hem de Andres sayesinde, sorunumu çözdü. Ancak daha sonra, açılır listeme dinamik olarak eklenen öğelerle çalışan bir şeye ihtiyacım vardı. Bununla karşılaşan herkes, hem başlangıç ​​öğeleriyle hem de sayfa yüklendikten sonra açılır menüye eklenen öğelerle çalışan bir Andres varyasyonu çözümüyle de ilgilenebilir:

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

Veya dinamik olarak oluşturulmuş açılır menüler için:

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

Ardından , durumunuza bağlı olarak , data-keepOpenOnClickniteliği <li>etiketlerin herhangi birinde veya alt öğelerinde herhangi bir yere koyun . ÖRNEĞİN:

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

Bootstrap 4'te, açılır menünün içine bir form koyduğunuzda, içine tıkladığınızda çökmez.

Bu benim için en iyisi oldu:

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

Kısacası bunu deneyebilirsiniz. Benim için çalışıyor.

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

Menüye showsınıf verdiğinizde menü açılır , böylece işlevi kullanmadan kendiniz uygulayabilirsiniz 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')
})

Bunu codepen ile deneyin .

Bootstrap 3'te bir açılır menüye yerleştirilmiş bir akordeon / geçiş alt menüsünde aynı sorunu yaşıyordum. Tüm daraltma geçişlerinin açılır menüyü kapatmasını durdurmak için bu sözdizimini kaynak kodundan ödünç aldım :

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

[data-toggle="collapse"]@ DonamiteIsTnt'in bunu yapmak için bir özellik eklemesine benzer şekilde, formu kapatmayı durdurmak istediğiniz şeyle değiştirebilirsiniz .

İhtiyaç duyduğumuz kadar mükemmel çalışmasını sağlayan ve üzerinde daha fazla kontrole sahip olmasını sağlayan bazı kod satırları yazdım:

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