Bootstrap desplegable cerrar cuando se hace clic

Puede omitir la llamada desplegable todos juntos, el menú desplegable bootstrap funciona sin ella. Asegúrese de que está envolviendo su script correctamente, puede incluirlo en el encabezado o cuerpo de su página, aunque personalmente prefiero colocarlo en el cuerpo de su página.

JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>

Pasó el tiempo desde que se aceptó la respuesta, pero si desea mantener el menú desplegable abierto, si actúa como una especie de diálogo, la mejor manera que creo es:

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });

Si desea dejar de cerrar solo algunos de los menús desplegables, no todos, simplemente agregue una clase adicional a su bloque ul:

<ul class="dropdown-menu keep-open-on-click">

Y usa este código:

$(document).on('click', '.dropdown-menu', function(e) {
    if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});

Debe evitar que el evento burbujee en el árbol DOM:

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

Evento.stopPropagation evita que el evento llegue al nodo donde finalmente es manejado por Bootstrap hiding menu.

Esto funciona para mi (barra lateral abriendo un enlace simple con palanca de arranque)

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});

Gracias por la respuesta anterior, estaba teniendo el mismo problema con los submenús debajo de los menús desplegables. Usando la solución anterior pude resolver el problema para esto también.

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});

Poner

<script type="text/javascript">
    $('.dropdown-menu').click(function(e) {
          e.stopPropagation();
    });
</script>

En la respuesta original, elimine todas las clases, y simplemente ponga ".menú desplegable " clase, funcionó para mí. tengo un campo de entrada dentro del menú desplegable.

Si miras a la parte inferior de fuentes del widget desplegable, verás esto:

$(document)
  .on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
    e.stopPropagation()
  })

Así que tienes las siguientes opciones:

1. Simplemente envuelva el menú desplegable con formulario
2. O puede agregar el detector de eventos para el evento de clic de .menú desplegable YOUR_SELECTOR

$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })