it-swarm.com.de

Verhindert, dass das Dropdown-Menü "Bootstrap" bei Klicks geschlossen wird

Mein Menü verwendet Bootstrap 3 und ich kann nicht verhindern, dass das Dropdown-Menü beim Klicken geschlossen wird. Wie kann ich es tun?

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

Sie müssen verhindern, dass das Ereignis den DOM-Baum sprudelt:

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

event.stopPropagation verhindert, dass das Ereignis den Knoten erreicht, auf dem es schließlich vom Bootstrap-Versteckmenü verarbeitet wird.

Demo: http://jsfiddle.net/wkc5md23/3/

28
dfsq

Ich bin der Meinung, dass dies eine bessere Lösung sein sollte, da das Unterbrechen der Weitergabe beim Klick-Ereignis zu Problemen führen kann, die später in der Entwicklung auftreten. Sie können hier mehr darüber lesen: http://css-tricks.com/dangers-stopping-event-propagation/ Stattdessen stoppt diese Lösung die Weitergabe auf dem Bootstrap hide (hide .bs.dropdown), wodurch verhindert wird, dass das Ereignis hidden (hidden.bs.dropdown) fortgesetzt wird.

Der folgende Code wurde von mir übernommen und bearbeitet, damit er auf allen Bootstrap-Dropdowns funktioniert, wie er ursprünglich von hier übernommen wurde: Verhindern, dass das Bootstrap-Dropdown beim Klicken geschlossen wird Ich persönlich bevorzuge diesen Weg auch, weil er den eingebauten verwendet in Bootstrap-Dropdown-Ereignissen, die hier zu finden sind: 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

Nicht im Click-Out-Menü schließen

$(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

Sie können die Dropdown-Funktion vorübergehend deaktivieren. Dies ist eine Problemumgehung.

Beispiel mit Eingabefeld im Dropdown "Menü":

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

    });

Dies kann für alle Elemente verwendet werden, auf die geklickt werden kann, und Sie können individuell definieren, welche angeklickten Elemente das Dropdown-Menü schließen oder nicht schließen können.

0
Balogh Mihály