javascript - menus - menu desplegable vertical html5

Evitar que el menú desplegable de Bootstrap se cierre al hacer clic

Question

Mi menú usa Bootstrap 3 y no puedo evitar que el menú desplegable se cierre al hacer clic. ¿Cómo puedo hacerlo?

JSFiddle

 // Add open class if active
$(''.sidebar-nav'').find(''li.dropdown.active'').addClass(''open'');
// Open submenu if active
$(''.sidebar-nav'').find(''li.dropdown.open ul'').css("display","block");
// Change active menu
$(".sidebar-nav > li").click(function(){
$(".sidebar-nav > li").removeClass("active");
$(this).addClass("active");
});
// Add open animation
$(''.dropdown'').on(''show.bs.dropdown'', function(e){
$(this).find(''.dropdown-menu'').first().stop(true, true).slideDown();
});
// Add close animation
$(''.dropdown'').on(''hide.bs.dropdown'', function(e){
$(this).find(''.dropdown-menu'').first().stop(true, true).slideUp();
});

Answer 1

Debes detener el evento para que no burbujee en el árbol DOM:

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

event.stopPropagation evita que el evento llegue al nodo donde eventualmente es manejado por el menú oculto de Bootstrap.

Demostración: http://jsfiddle.net/wkc5md23/3/

Answer 2

Creo que esta debería ser una solución más adecuada, ya que detener la propagación en el evento de clic a veces puede causar problemas más adelante en el desarrollo. Puede leer más aquí: http://css-tricks.com/dangers-stopping-event-propagation/ En su lugar, esta solución detiene la propagación en el evento Bootstrap hide ( hide.bs.dropdown ), lo que impide que continúe. al evento oculto ( hidden.bs.dropdown ).

El siguiente código ha sido tomado y editado por mí mismo para hacerlo funcionar en todos los menús desplegables de Bootstrap, como se ha tomado originalmente desde aquí: Evitar que el menú desplegable de arranque se cierre al hacer clic . Personalmente prefiero esta opción también porque usa los eventos desplegables integrados de Bootstrap. , que se puede encontrar aquí: http://getbootstrap.com/javascript/#dropdowns-events

 $(function() {
$(''.dropdown'').on({
"click": function(event) {
if ($(event.target).closest(''.dropdown-toggle'').length) {
$(this).data(''closable'', true);
} else {
$(this).data(''closable'', false);
}
},
"hide.bs.dropdown": function(event) {
hide = $(this).data(''closable'');
$(this).data(''closable'', true);
return hide;
}
});
});

Answer 3

No cerrar al hacer clic en el menú lateral

$(function() {
var closeble = false;
$(''body'').on(''click'', function (e) {
if (!$(event.target).is("a.dropdown-toggle")) {
closeble = false;
}
});
$(''.dropdown'').on({
"click": function(event) {
if ($(event.target).closest(''.dropdown-toggle'').length) {
closeble = true;
} else {
closeble = false;
}
},
"hide.bs.dropdown": function() {
return closeble;
}
});

});

Answer 4

Puede desactivar la funcionalidad desplegable temporalmente. Esta es una solución.

Ejemplo con campo de entrada dentro del menú desplegable:

 //for dropdown field not closing when clicking on inputfield
$(document).on(''focus'', ''input'', function(e) {
// this attribute can be anything except "dropdown", you can leave it blank
$(''#yourDropdownID'').attr(''data-toggle'',''off'');
});
//for dropdown field back to normal when not on inputfield
$(document).on(''focusout'', ''input'', function(e) {
$(''#yourDropdownID'').attr(''data-toggle'',''dropdown'');
});

Esto se puede usar en cualquier elemento en el que se pueda hacer clic y puede definir individualmente los elementos en los que se puede hacer clic para cerrar o no cerrar el menú desplegable.