So habe ich einige Animationen zu den Navigationsleisten-Dropdowns hinzugefügt, aber aus irgendeinem Grund die am meisten akzeptierte Antwort Hinzufügen eines Slide-Effekts zum Bootstrap-Dropdown) scheint zu brechen oder "normal" zu werden, wenn Sie auf kleinen Fenstern nach oben rutschen.

So ist die seltsame Sache, dass dies nur mit der slideUp-Animation aus dem Artikel passiert:

// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown(5000);
});

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(5000);
});

Ich kann diese Zeilen kopieren und auf @ in die Google Chrome-Konsole einfügehttp: //bootswatch.com/default, ändere meine Auflösung in eine, bei der die Navigationsleisten zusammenbrechen und alle brechen. (Ich habe die Animationszeiten verlängert, um Fehler zu beheben.)

Normal

Broken SlideUp:

Aber aus irgendeinem Grund, wenn ich @ lauf$('.navbar').find('.dropdown-menu').slideUp(5000); Ich erhalte ein normales Menü:

Gedanken

Aktualisiere Dies funktioniert mit der letzten Option, da dadurch die Klasse 'open' nicht aus dem einschließenden Dropdown-LI-Element entfernt wird. Also vielleicht dasopen class wird vorzeitig entfernt, während die Animation ausgeführt wird.

Update 2 Ich kann das Problem mit preventDefault beheben:

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  e.preventDefault();
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
    $(this).parent().removeClass('open');
  });
});