Keep Bootstrap dropdown open on click

Question

I use a bootstrap dropdown as a shoppingcart. In the shopping cart is a 'remove product' button (a link). If I click it, my shoppingcart script removes the product, but the menu fades away. Is there anyway way to prevent this? I tried e.startPropagation, but that didn't seem to work:

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

As you can see tha element with class="dropwdown-toggle" made it a dropdown. Another idea was that I just reopen it on clicking programmatically. So if someone can explain me how to programmatically open a Bootstrap dropdown, it would help well!

Answer 1

Try removing the propagation on the button itself like so:

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

Edit

Here is a demo from the comments with the solution above:

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

Relevant code:

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>