简介

Question

我正在使用bootstrap，我想在下拉列表中添加动画。我想为它添加动画，向下滑动并在离开时备份。我怎么能这样做？

我尝试的事情：

像这样更改Js下拉文件：

How can I make Bootstrap's navigation dropdown slide smoothly up and down?

Answer 1

如果你更新到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事件here的信息，特别是有关下拉事件here的信息。

Answer 2

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

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

Answer 3

我不知道我是否可以破解这个帖子，但我想出了一个快速解决当开放类被删除太快时发生的视觉错误。基本上，它只是在slideUp事件中添加一个OnComplete函数并重置所有活动的类和属性。是这样的：

结果如下：Bootply example

的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');
        });
    });
});

Answer 4

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

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

Answer 5

点击后可以使用以下代码

完成

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').slideToggle(500);
});

Answer 6

我正在使用上面的代码，但我已经通过slideToggle更改了延迟效果。

它会在动画悬停时滑动下拉列表。

$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400);
    }, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400)
    });

Answer 7

更新2018年Bootstrap 4

在Boostrap 4中，.open类已替换为.show。我想仅使用CSS过渡来实现此功能，而无需额外的JS或jQuery ...

.show > .dropdown-menu {
  max-height: 900px;
  visibility: visible;
}

.dropdown-menu {
  display: block;
  max-height: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

演示：https://www.codeply.com/go/3i8LzYVfMF

注意：max-height可以设置为足以容纳下拉内容的任何大值。

Answer 8

扩大的答案，如果之前没有足够的细节那么，这是我的第一个答案。

对于Bootstrap 3.x我个人更喜欢CSS动画，我一直在使用animate.css＆amp;以及Bootstrap Dropdown Javascript Hooks。虽然它可能不会产生完全的影响，但它是一种非常灵活的方法。

第1步：使用头标记将animate.css添加到您的网页：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

第2步：在触发器上使用标准的Bootstrap HTML：

<div class="dropdown">
  <button type="button" data-toggle="dropdown">Dropdown trigger</button>

  <ul class="dropdown-menu">
    ...
  </ul>
</div>

第3步：然后将2个自定义数据属性添加到dropdrop-menu元素;动画的数据下拉列表和动画中的数据下拉列表。这些可以是任何animate.css效果，如fadeIn或fadeOut

<ul class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
......
</ul>

第4步：接下来添加以下Javascript来读取数据下拉输入/输出数据属性并对Bootstrap Javascript API挂钩/事件（http://getbootstrap.com/javascript/#dropdowns-events）作出反应：

var dropdownSelectors = $('.dropdown, .dropup');

// Custom function to read dropdown data
// =========================
function dropdownEffectData(target) {
  // @todo - page level global?
  var effectInDefault = null,
      effectOutDefault = null;
  var dropdown = $(target),
      dropdownMenu = $('.dropdown-menu', target);
  var parentUl = dropdown.parents('ul.nav'); 

  // If parent is ul.nav allow global effect settings
  if (parentUl.size() > 0) {
    effectInDefault = parentUl.data('dropdown-in') || null;
    effectOutDefault = parentUl.data('dropdown-out') || null;
  }

  return {
    target:       target,
    dropdown:     dropdown,
    dropdownMenu: dropdownMenu,
    effectIn:     dropdownMenu.data('dropdown-in') || effectInDefault,
    effectOut:    dropdownMenu.data('dropdown-out') || effectOutDefault,  
  };
}

// Custom function to start effect (in or out)
// =========================
function dropdownEffectStart(data, effectToStart) {
  if (effectToStart) {
    data.dropdown.addClass('dropdown-animating');
    data.dropdownMenu.addClass('animated');
    data.dropdownMenu.addClass(effectToStart);    
  }
}

// Custom function to read when animation is over
// =========================
function dropdownEffectEnd(data, callbackFunc) {
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  data.dropdown.one(animationEnd, function() {
    data.dropdown.removeClass('dropdown-animating');
    data.dropdownMenu.removeClass('animated');
    data.dropdownMenu.removeClass(data.effectIn);
    data.dropdownMenu.removeClass(data.effectOut);

    // Custom callback option, used to remove open class in out effect
    if(typeof callbackFunc == 'function'){
      callbackFunc();
    }
  });
}

// Bootstrap API hooks
// =========================
dropdownSelectors.on({
  "show.bs.dropdown": function () {
    // On show, start in effect
    var dropdown = dropdownEffectData(this);
    dropdownEffectStart(dropdown, dropdown.effectIn);
  },
  "shown.bs.dropdown": function () {
    // On shown, remove in effect once complete
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectIn && dropdown.effectOut) {
      dropdownEffectEnd(dropdown, function() {}); 
    }
  },  
  "hide.bs.dropdown":  function(e) {
    // On hide, start out effect
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectOut) {
      e.preventDefault();   
      dropdownEffectStart(dropdown, dropdown.effectOut);   
      dropdownEffectEnd(dropdown, function() {
        dropdown.dropdown.removeClass('open');
      }); 
    }    
  }, 
});

步骤5（可选）：如果您想加速或改变动画，可以使用CSS执行此操作，如下所示：

.dropdown-menu.animated {
  /* Speed up animations */
  -webkit-animation-duration: 0.55s;
  animation-duration: 0.55s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

如果感兴趣的话，请写一篇更详细的文章和下载：文章：http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

希望这有用＆amp;第二次写作具有所需的详细程度汤姆

Answer 9

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

如果您想在悬停时显示下拉列表，则此代码有效。

我刚刚将.slideToggle更改为.slideDown＆amp; .slideUp，并删除了(400)时间

Answer 10

BOOTSTRAP 3参考

已添加，因为我一直被该线程中的解决方案所困扰，并且每次都使我感到困惑。

基本上，BS下拉列表会立即从父级删除.open类，因此向上滑动不起作用。

与对slideDown（）的其他解决方案使用相同的位；

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

Answer 11

这是使用jQuery的一个很好的简单解决方案，效果很好：

$('.dropdown-toggle').click(function () {
    $(this).next('.dropdown-menu').slideToggle(300);
});

$('.dropdown-toggle').focusout(function () {
    $(this).next('.dropdown-menu').slideUp(300);
})

幻灯片动画切换在点击时发生，并且在失去焦点时总是向上滑动。

将300值更改为您想要的任何值，数字越小，动画越快。

修改

此解决方案仅适用于桌面视图。它需要进一步修改才能很好地显示移动设备。

Answer 12

简介

截至撰写本文时，原始答案现在已经8岁了。我仍然觉得原始问题还没有适当的解决方案。

引导程序自那时以来已经走了很长一段路，现在是 4.5.2 。这个答案解决了这个问题。

到目前为止，所有其他解决方案都存在问题

所有其他答案的问题在于，尽管它们与[]byte / show.bs.dropdown挂钩，但后续事件hide.bs.dropdown / shown.bs.dropdown要么触发得太早（动画仍在进行中），或者因为被抑制（hidden.bs.dropdown而根本不触发。

干净的溶液

由于Bootstraps e.preventDefault()类中的show()和hide()的实现具有一些相似之处，因此在模仿原始行为时我将它们归类在Dropdown中，并且几乎没有添加QoL帮助程序可用于toggleDropdownWithAnimation()和showDropdownWithAnimation()。
hideDropdownWithAnimation()创建一个toggleDropdownWithAnimation() / shown.bs.dropdown事件，就像Bootstrap这样做一样。然后在动画完成后触发该事件-就像您期望的那样。

hidden.bs.dropdown

绑定事件监听器

现在，我们已经编写了适当的回调来显示/隐藏带有动画的下拉菜单，让我们将它们实际绑定到正确的事件。

我在其他答案中经常看到的一个常见错误是将事件侦听器直接绑定到元素。虽然这对于注册事件侦听器时出现的DOM元素来说很好用，但它不会绑定到以后添加的元素。

这就是为什么通常最好直接绑定到/** * Toggle visibility of a dropdown with slideDown / slideUp animation. * @param {JQuery} $containerElement The outer dropdown container. This is the element with the .dropdown class. * @param {boolean} show Show (true) or hide (false) the dropdown menu. * @param {number} duration Duration of the animation in milliseconds */ function toggleDropdownWithAnimation($containerElement, show, duration = 300): void { // get the element that triggered the initial event const $toggleElement = $containerElement.find('.dropdown-toggle'); // get the associated menu const $dropdownMenu = $containerElement.find('.dropdown-menu'); // build jquery event for when the element has been completely shown const eventArgs = {relatedTarget: $toggleElement}; const eventType = show ? 'shown' : 'hidden'; const eventName = `${eventType}.bs.dropdown`; const jQueryEvent = $.Event(eventName, eventArgs); if (show) { // mimic bootstraps element manipulation $containerElement.addClass('show'); $dropdownMenu.addClass('show'); $toggleElement.attr('aria-expanded', 'true'); // put focus on initial trigger element $toggleElement.trigger('focus'); // start intended animation $dropdownMenu .stop() // stop any ongoing animation .hide() // hide element to fix initial state of element for slide down animation .slideDown(duration, () => { // fire 'shown' event $($toggleElement).trigger(jQueryEvent); }); } else { // mimic bootstraps element manipulation $containerElement.removeClass('show'); $dropdownMenu.removeClass('show'); $toggleElement.attr('aria-expanded', 'false'); // start intended animation $dropdownMenu .stop() // stop any ongoing animation .show() // show element to fix initial state of element for slide up animation .slideUp(duration, () => { // fire 'hidden' event $($toggleElement).trigger(jQueryEvent); }); } } /** * Show a dropdown with slideDown animation. * @param {JQuery} $containerElement The outer dropdown container. This is the element with the .dropdown class. * @param {number} duration Duration of the animation in milliseconds */ function showDropdownWithAnimation($containerElement, duration = 300) { toggleDropdownWithAnimation($containerElement, true, duration); } /** * Hide a dropdown with a slideUp animation. * @param {JQuery} $containerElement The outer dropdown container. This is the element with the .dropdown class. * @param {number} duration Duration of the animation in milliseconds */ function hideDropdownWithAnimation($containerElement, duration = 300) { toggleDropdownWithAnimation($containerElement, false, duration); }：

document

Answer 13

我建议使用 transform 而不是 max-height，它更快，并且 GPU 加速。

对于 Bootstrap 5，添加以下 CSS：

env_vars

添加幻灯片效果以引导下拉列表

13 个答案:

简介

到目前为止，所有其他解决方案都存在问题

干净的溶液

绑定事件监听器