将幻灯片效果添加到引导下拉菜单 [英] Adding a slide effect to bootstrap dropdown

问题描述

我正在使用引导，我想添加动画一个下拉列表。

I'm using bootstrap, and I'd like to add animation to a dropdown.

我想添加一个动画，离开时向下滑动并备份。

I want to add an animation to it, slide down and back up when leaving it.

我该怎么做？

我尝试的东西：

更改Js下拉文件，如下所示：

Changing the Js drop down file like this:

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

任何帮助都会很好！谢谢！

Any help would be good! thank you!.

推荐答案

如果您更新到Bootstrap 3（BS3），他们已经暴露了大量的JavaScript事件很高兴将您所需的功能与之结合。在BS3中，此代码将给您所有的下拉菜单提供您要查找的动画效果：

If you update to Bootstrap 3 (BS3), they've exposed a lot of Javascript events that are nice to tie your desired functionality into. In BS3, this code will give all of your dropdown menus the animation effect you are looking for:

  // 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事件这里，具体是关于下拉列表事件这里。

You can read about BS3 events here and specifically about the dropdown events here.

这篇关于将幻灯片效果添加到引导下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！