Evitar que el menu desplegable de Bootstrap se cierre onclick

Mi menu usa Bootstrap 3 y no puedo evitar que el menu desplegable se cierre onclick. ¿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(); }); 

Debes detener el evento para que no burbujee en el tree DOM:

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

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

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

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 menus desplegables de Bootstrap, como se ha tomado originalmente desde aquí: Evitar que el menu desplegable de arranque se cierre onclick . Personalmente prefiero esta opción también porque usa los events 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; } }); }); 

No cerrar onclick en el menu 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; } }); 

});

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

Ejemplo con campo de input dentro del menu 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 menu desplegable.