javascript - hacer - Cierre del menú desplegable de Bootstrap cuando se hace clic

menu desplegable bootstrap no funciona

Question

Puse un formulario dentro de un menú desplegable de bootstrap, pero cuando hago clic en cualquiera de los campos del formulario, el menú desplegable desaparece. Tengo este código, pero no sé dónde colocarlo para evitar que desaparezca el menú desplegable.

$(function test() {
  // Setup drop down menu
  $(''.dropdown-toggle'').dropdown();

  // Fix input element click problem
  $(''.dropdown input, .dropdown label'').click(function(e) {
    e.stopPropagation();
  });
});

¿Podría alguien decirme dónde debería poner esto? Lo intenté en el menú desplegable de arranque, lo intenté dentro del HTML pero todavía no funciona.

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.

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

Poner

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

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

Answer 6

Puede omitir la llamada desplegable, el menú desplegable de arranque funciona sin ella. Asegúrese de que está ajustando su script correctamente, puede incluirlo en el encabezado o el 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>

Answer 7

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

Answer 8

Si miras al final de las fuentes del widget desplegable, verás esto:

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

Entonces tienes las siguientes opciones:

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

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

Answer 9

Simplemente use este ejemplo. Esta solución funciona para mí.

<script type="text/javascript">
window.addEvent(''domready'',function() {    
   Element.prototype.hide = function() {
      $(function () { 
        // replace your tab id with myTab
        //<ul id="myTab" class="nav nav-tabs">
        $(''#myTab li:eq(1) a'').tab(''show'');
      });      
   };
});
</script>

Espero que ayude Gracias.