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.