jquery - español - Mantenga abierto el menú desplegable de Bootstrap al hacer clic
bootstrap js (6)
En bootstrap 4, cuando pones un formulario dentro del menú desplegable, no se colapsará al hacer clic dentro de él.
Así que esto funcionó mejor para mí:
<div class="dropdown">
<!-- toggle button/link -->
<div class="dropdown-menu">
<form>
<!-- content -->
</form>
</div>
</div>
Uso un menú desplegable de bootstrap como un carrito de compras. En el carro de compras hay un botón de ''eliminar producto'' (un enlace). Si hago clic en él, mi script de carrito de compras elimina el producto, pero el menú se desvanece. ¿Hay alguna manera de prevenir esto? Intenté e.startPropagation, pero eso no pareció funcionar:
<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:
€ 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: € 43,00</a></li>
<li><a href="/checkout">Checkout</a></li>
</ul>
</li>
</ul>
Como puede ver, ese elemento con class = "dropwdown-toggle" lo convirtió en un menú desplegable. Otra idea fue que simplemente volví a abrir haciendo clic en programación. Entonces, si alguien puede explicarme cómo abrir programáticamente un menú desplegable de Bootstrap, ¡sería de gran ayuda!
En resumen, puedes probar esto. Está funcionando para mí.
<span class="product-remove">
<a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a>
</span>
Escribí algunas líneas de código que hacen que funcione tan perfecto como lo necesitemos con más control sobre él:
$(".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);
});
Esta respuesta es solo una nota al margen de la respuesta aceptada. Gracias tanto a OP como a Andres por este Q & A, resolvió mi problema. Más tarde, sin embargo, necesitaba algo que funcionara con elementos agregados dinámicamente en mi menú desplegable. Cualquiera que se encuentre con esta también podría estar interesado en una solución de Andres que funcione tanto con los elementos iniciales como con los elementos agregados a la lista desplegable después de que la página se haya cargado:
$(function() {
$("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) {
e.stopPropagation();
});
});
O bien, para los menús desplegables creados dinámicamente:
$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) {
e.stopPropagation();
});
A continuación, simplemente coloque el atributo data-keepOpenOnClick en cualquier parte de las etiquetas <li> o sus elementos secundarios, según su situación. P.EJ:
<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>
Estaba teniendo el mismo problema con un submenú de acordeón / alternar que estaba anidado dentro de un menú desplegable en Bootstrap 3. Tomé esta sintaxis prestada del código fuente para detener todo el colapso al cerrar el menú desplegable:
$(document).on(
''click.bs.dropdown.data-api'',
''[data-toggle="collapse"]'',
function (e) { e.stopPropagation() }
);
Puede reemplazar [data-toggle="collapse"] con lo que quiera para dejar de cerrar el formulario, de forma similar a como @DonamiteIsTnt agregó una propiedad para hacerlo.
Intente eliminar la propagación en el botón como así:
$(''.dropdown-menu a.removefromcart'').click(function(e) {
e.stopPropagation();
});
Editar
Aquí hay una demostración de los comentarios con la solución anterior:
http://jsfiddle.net/andresilich/E9mpu/
Código relevante:
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:
€ 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: € 43,00</a></li>
<li><a href="/checkout">Checkout</a></li>
</ul>
</li>
</ul>