如果您更新到 Bootstrap 3 (BS3)，它们会公开许多 Javascript 事件，这些事件可以很好地将您想要的功能绑定到其中。在 BS3 中，此代码将为您的所有下拉菜单提供您正在寻找的动画效果：

  // Add slideDown animation to Bootstrap dropdown when expanding.
  $('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add slideUp animation to Bootstrap dropdown when collapsing.
  $('.dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

你可以阅读有关BS3的事件在这里，特别对下拉事件在这里。

也可以避免使用 JavaScript 来实现下拉效果，并使用 CSS3 过渡，通过将以下一小段代码添加到您的样式中：

.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}

.dropdown.open .dropdown-menu { /* For Bootstrap 4, use .dropdown.show instead of .dropdown.open */
    max-height: 300px;
    opacity: 1;
}

这种方式的唯一问题是您应该手动指定 max-height。如果你设置一个非常大的值，你的动画就会非常快。

如果您知道下拉列表的大致高度，它就像一个魅力，否则您仍然可以使用 javascript 来设置精确的 max-height 值。

这是小例子：DEMO

！此解决方案中存在带有填充的小错误，请查看 Jacob Stamm 对解决方案的评论。

我正在做类似的事情，但在悬停而不是点击..这是我正在使用的代码，您可以稍微调整一下以使其在点击时工作

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});

我不知道我是否可以撞到这个线程，但我想出了一个快速修复开放类删除太快时发生的视觉错误的方法。基本上，所有要做的就是在 slideUp 事件中添加一个 OnComplete 函数并重置所有活动的类和属性。是这样的：

结果如下：Bootply 示例

Javascript/Jquery：

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

    // ADD SLIDEUP ANIMATION TO DROPDOWN //
    $('.dropdown').on('hide.bs.dropdown', function(e){
        e.preventDefault();
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
            //On Complete, we reset all active dropdown classes and attributes
            //This fixes the visual bug associated with the open class being removed too fast
            $('.dropdown').removeClass('show');
            $('.dropdown-menu').removeClass('show');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});

这是我的幻灯片和淡入淡出效果的解决方案：

   // Add slideup & fadein animation to dropdown
   $('.dropdown').on('show.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
         $(this).css({'margin-top':''});
      });
   });
   // Add slidedown & fadeout animation to dropdown
   $('.dropdown').on('hide.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
         $(this).css({'margin-top':'', display:''});
      });
   });