Giữ trình đơn thả xuống Bootstrap mở khi nhấp vào

Question

Tôi sử dụng trình đơn thả xuống bootstrap dưới dạng giỏ hàng. Trong giỏ hàng là 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? Tôi cố gắng e.startPropagation, nhưng điều đó dường như không làm việc:

<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ể nhìn thấy tha phần tử với class = "dropwdown-Toggle" đã làm cho nó một danh sách thả xuống. Một ý tưởng khác là tôi chỉ mở lại khi nhấp vào lập trình. Vì vậy, nếu ai đó có thể giải thích cho tôi làm thế nào để lập trình mở một trình đơn thả xuống Bootstrap, nó sẽ giúp tốt!

Answer 1

Hãy thử loại bỏ các tuyên truyền vào nút tự như vậy:

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

Sửa

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

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

Mã có 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> 

Answer 2

Câu trả lời này chỉ là một sidenote để trả lời chấp nhận. Nhờ cả OP và Andres cho Q & A này, nó đã giải quyết được vấn đề của tôi. Sau đó, tuy nhiên, tôi cần một cái gì đó đã làm việc với các mục được thêm động trong trình đơn thả xuống của tôi. Bất cứ ai đi ngang qua một điều này cũng có thể quan tâm giải pháp một biến thể Andres' mà làm việc cả với các yếu tố ban đầu cũng như các yếu tố bổ sung vào danh sách thả xuống sau khi trang đã nạp:

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

Hoặc, cho các menu thả xuống tự động tạo ra :

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

Sau đó, chỉ cần đặt các data-keepOpenOnClick thuộc tính bất cứ nơi nào trong bất kỳ <li> thẻ hoặc phần tử con của nó, tùy thuộc vào tình hình của bạn. EG:

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

Answer 3

Tôi đã có cùng một vấn đề với một accordion/chuyển đổi sub-menu đã được lồng trong một thả xuống menu trong Bootstrap 3. Borrowed cú pháp này từ source code để ngăn chặn tất cả sụp đổ Toggles từ đóng thả xuống :

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

bạn có thể thay [data-toggle="collapse"] với bất cứ điều gì bạn muốn dừng đóng hình thức, tương tự như cách @DonamiteIsTnt thêm một tài sản để làm như vậy.

Answer 4

Tóm lại, 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> 

Answer 5

tôi đã viết một số dòng mã mà làm cho nó hoạt động hoàn hảo như chúng ta cần phải có nhiều kiểm soát 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); 
}); 

Answer 6

On bootstrap 4, khi bạn đặt một hình thức bên trong trình đơn thả xuống, nó sẽ không sụp đổ khi nhấp vào bên trong nó.

Vì vậy, đâ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>