web-dev-qa-db-fra.com

Empêcher la liste déroulante Bootstrap de fermer les clics

Mon menu utilise Bootstrap 3 et je ne peux pas empêcher la fermeture du menu déroulant au clic. Comment puis-je le faire?

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();
  });
javascripttwitter-bootstrapdrop-down-menujsfiddle
9
Kasara

Vous devez empêcher l’événement de remonter dans l’arborescence DOM:

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

event.stopPropagation empêche l’événement d’atteindre le nœud où il est finalement géré par le menu de masquage Bootstrap.

Démo: http://jsfiddle.net/wkc5md23/3/

28
dfsq

Je pense que cela devrait être une solution plus appropriée, car arrêter la propagation sur l'événement click pourrait parfois causer des problèmes plus tard dans le développement. Vous pouvez en lire plus ici: http://css-tricks.com/dangers-stopping-event-propagation/ Au lieu de cela, cette solution arrête la propagation sur le Bootstrap hide (masquer .bs.dropdown), ce qui l'empêche de continuer avec l'événement hidden (hidden.bs.dropdown).

Le code suivant a été pris et édité par moi-même pour le faire fonctionner dans toutes les listes déroulantes Bootstrap, comme il a été pris à partir d'ici: Empêcher la fermeture d'une liste déroulante bootstrap lors d'un clic Personnellement, je préfère cette façon aussi dans les événements déroulants Bootstrap, qui peuvent être trouvés ici: 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;
          }
      });
  });
17
yaharga

Non fermé dans le menu latéral

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

});

1
julioalberto64

Vous pouvez désactiver la fonctionnalité de liste déroulante temporairement. Ceci est une solution de contournement.

Exemple avec un champ de saisie dans le "menu" déroulant:

    //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');

    });

Cela peut être utilisé sur tout ce qui est cliquable et vous pouvez définir individuellement les éléments sur lesquels vous avez cliqué peuvent fermer ou non le menu déroulant. 

0
Balogh Mihály