Giữ cho menu thả xuống Bootstrap mở khi nhấp chuột

Tôi sử dụng trình đơn thả xuống bootstrap làm siêu thị mua sắm. Trong giỏ hàng có nút 'loại bỏ sản phẩm' (một liên kết). Nếu tôi nhấp vào nó, tập lệnh shoppingcart của tôi sẽ xóa sản phẩm, nhưng menu sẽ biến mất. Có cách nào để ngăn chặn điều này không? Tôi đã thử e.startPropagation, nhưng điều đó dường như không hoạt động:

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

Như bạn có thể thấy phần tử tha với class = "dropwdown-toggle" đã biến nó thành một menu thả xuống. Một ý tưởng khác là tôi chỉ cần mở lại nó khi nhấp vào lập trình. Vì vậy, nếu ai đó có thể giải thích cho tôi cách mở một trình đơn thả xuống Bootstrap theo chương trình, điều đó sẽ rất hữu ích!

Hãy thử loại bỏ sự lan truyền trên chính nút như sau:

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

Biên tập

Đây là bản demo từ các ý kiến ​​với giải pháp ở trên:

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

Mã liên quan:

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>

Câu trả lời này chỉ là một phụ chú cho câu trả lời được chấp nhận. Cảm ơn cả OP và Andres về phần Hỏi & Đáp này, nó đã giải quyết được vấn đề của tôi. Tuy nhiên, sau đó, tôi cần thứ gì đó hoạt động với các mục được thêm động trong menu thả xuống của tôi. Bất kỳ ai xem qua giải pháp này cũng có thể quan tâm đến giải pháp của Andres biến thể hoạt động cả với các phần tử ban đầu cũng như các phần tử được thêm vào menu thả xuống sau khi trang đã tải:

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

Hoặc, đối với các menu thả xuống được tạo động:

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

Sau đó, chỉ cần đặt data-keepOpenOnClickthuộc tính vào bất kỳ vị trí nào trong bất kỳ <li>thẻ nào hoặc các phần tử con của nó, tùy thuộc vào tình huống của bạn. VÍ DỤ:

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

Trên bootstrap 4, khi bạn đặt một biểu mẫu bên trong trình đơn thả xuống, nó sẽ không thu gọn khi nhấp vào bên trong của nó.

Vì vậy, điều này làm việc tốt nhất cho tôi:

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

Trong ngắn hạn, Bạn có thể thử điều này. Đó là làm việc cho tôi.

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

Menu mở ra khi bạn cho showlớp vào menu, vì vậy bạn có thể tự thực hiện chức năng mà không cần sử dụng 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')
})

Hãy thử điều này trong codepen .

Tôi đã gặp vấn đề tương tự với menu phụ accordion / toggle được lồng trong menu thả xuống trong Bootstrap 3. Mượn cú pháp này từ mã nguồn để ngăn tất cả các nút chuyển đổi thu gọn đóng menu thả xuống:

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

Bạn có thể thay thế [data-toggle="collapse"]bằng bất kỳ thứ gì bạn muốn để dừng đóng biểu mẫu, tương tự như cách @DonamiteIsTnt đã thêm thuộc tính để làm như vậy.

Tôi đã viết một số dòng mã để làm cho nó hoạt động hoàn hảo như chúng ta cần với nhiều quyền kiểm soát hơn trên nó:

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