Ajout d'un effet de glissement à la liste déroulante bootstrap

Question

J'utilise bootstrap et j'aimerais ajouter une animation à une liste déroulante. Je veux ajouter une animation à celle-ci, glisser vers le bas et remonter en la quittant. Comment puis-je faire cela ?

Les choses que j'ai essayées :

En changeant le fichier déroulant Js comme ceci :

Comment faire en sorte que le menu déroulant de navigation de Bootstrap glisse en douceur vers le haut et vers le bas ?

Answer 1

Pour Bootstrap 3, cette variation sur les réponses ci-dessus fait que le mobile slideUp() l'animation est plus fluide ; les réponses ci-dessus présentent une animation hachée parce que Bootstrap supprime l'élément .open du parent de la bascule immédiatement, ce code restaure donc la classe jusqu'à ce que la classe slideUp() l'animation est terminée.

// Add animations to topnav dropdowns
// based on https://stackoverflow.com/a/19339162
// and https://stackoverflow.com/a/52231970

$('.dropdown')
  .on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
  })
  .on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, false).slideUp(300, function() {
      $(this).parent().removeClass('open');
    });
  })
  .on('hidden.bs.dropdown', function() {
    $(this).addClass('open');
  });

Principales différences :

• En el hide.bs.dropdown J'utilise le gestionnaire d'événement .stop() La valeur par défaut ( false ) pour son deuxième argument ( jumpToEnd )
• En hidden.bs.dropdown rétablit le .open au parent de la bascule de la liste déroulante, et il le fait à peu près immédiatement après que la classe a été retirée pour la première fois. Pendant ce temps, le slideUp() est toujours en cours d'exécution, et comme dans les réponses ci-dessus, sa fonction de rappel "the-animation-is-completed" est responsable de la suppression définitive de l'objet .open de son parent.
• Les méthodes sont enchaînées car le sélecteur de chaque gestionnaire d'événement est le même.

Answer 2

 $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
    $(this).parent().removeClass('open');
  });

Je viens de remplacer .slideUp par .slideToggle et cela fonctionne bien pour le haut et le bas.