单击时保持 Bootstrap 下拉菜单打开

小开

最佳答案

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>

小开

This answer is just a sidenote to the accepted answer. Thanks to both the OP and Andres for this Q & A, it solved my problem. Later, however, I needed something that worked with dynamically added items in my dropdown. Anyone coming across this one might also be interested in a variation Andres' solution that works both with the initial elements as well as elements added to the dropdown after the page has loaded:

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

Or, for dynamically created dropdown menus:

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

Then just put the data-keepOpenOnClick attribute anywhere in any of the <li> tags or its child elements, depending on your situation. E.G.:

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

小开

I was having the same problem with an accordion/toggle sub-menu that was nested within a dropdown-menu in Bootstrap 3. Borrowed this syntax from the source code to stop all collapse toggles from closing the dropdown:

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

You can replace [data-toggle="collapse"] with whatever you want to stop closing the form, similar to how @DonamiteIsTnt added a property to do so.

小开

In short, You can try this. It is working for me.

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

小开

I wrote some lines of code that make it works as perfect as we need with more of control on it:

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

小开

On bootstrap 4, when you put a form inside the dropdown menu, it won't collapse when clicking inside of it.

So this worked best for me:

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

小开

The menu opens when you give show class to the menu, so you can implement the function yourself without using 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')
})

Try this in codepen.