Saltar al contenido

Mantener abierto el menú desplegable de Bootstrap cuando se hace clic en Off

Presta atención porque en este post vas a encontrar el resultado que buscas.Este enunciado fue analizado por nuestros especialistas para asegurar la calidad y exactitud de nuestro post.

Solución:

Desde la sección de eventos del Orejadropdown documentación:

hide.bs.dropdown: este evento se activa inmediatamente cuando se llama al método de instancia oculta.

Para empezar, para evitar que se cierre el menú desplegable, podemos simplemente escuchar este evento y evitar que continúe regresando false:

$('#myDropdown').on('hide.bs.dropdown', function () 
    return false;
);

Para una solución completa, probablemente desee permitir que se cierre cuando se hace clic en el menú desplegable. tan solo Algo de tiempo querremos evitar que la caja se cierre.

Para ello estableceremos .data() banderas en dos eventos más planteados por el menú desplegable:

  • shown.bs.dropdown – Cuando se muestre, estableceremos .data('closable') para false
  • click – Al hacer clic, estableceremos .data('closable') para true

Así, si el hide.bs.dropdown evento fue planteado por un click en el menú desplegable, permitiremos un cierre.

Demostración en vivo en jsFiddle

JavaScript

$('.dropdown.keep-open').on(
    "shown.bs.dropdown": function()  this.closable = false; ,
    "click":             function()  this.closable = true; ,
    "hide.bs.dropdown":  function()  return this.closable; 
);

HTML(nota que he agregado la clase keep-open al menú desplegable)


Los cambios de versión en algunas dependencias han causado que KyleMit y la mayoría de las otras soluciones ya no funcionen. Investigué un poco más y, por alguna razón, un click() se envía cuando Bootstrap intenta y falla hide.bs.dropdownseguida de otra llamada a hide.bs.dropdown. Resolví este problema forzando el cierre click() ocurrir en el botón en sí, no en todo el menú desplegable.

Demostración en vivo en Bootply

JavaScript

$('.keep-open').on(
    "shown.bs.dropdown": function()  $(this).attr('closable', false); ,
    //"click":             function()  , // For some reason a click() is sent when Bootstrap tries and fails hide.bs.dropdown
    "hide.bs.dropdown":  function()  return $(this).attr('closable') == 'true'; 
);

$('.keep-open').children().first().on(
  "click": function() 
    $(this).parent().attr('closable', true );
  
)

HTML

Click the dropdown button

It will stay open unless clicked again to close

$('.dropdown.keep-open').on(
    "shown.bs.dropdown": function()  this.closable = true; ,
    "click":             function(e)  
        var target = $(e.target);
        if(target.hasClass("btn-primary")) 
            this.closable = true;
        else 
           this.closable = false; 
    ,
    "hide.bs.dropdown":  function()  return this.closable; 
);
body 
    margin: 10px;





Click the dropdown button

It will stay open unless clicked again to close

About this SO Question: Keep dropdown menu open
Fork This Skeleton Here Bootrsap 3.0 Skeleton
Bootstrap Documentation: Dropdowns

Te mostramos las reseñas y valoraciones de los lectores

Te invitamos a avalar nuestra misión dejando un comentario y valorándolo te lo agradecemos.

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *