向 bootstrap 下拉菜单添加滑动效果 [英] Adding a slide effect to bootstrap dropdown

问题描述

我正在使用 bootstrap，我想将动画添加到落下.我想给它添加一个动画，离开时向下滑动并返回.我怎么能这样做?

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. How could I do this?

我尝试过的事情:

像这样更改 Js 下拉文件:

Changing the Js drop down file like this:

如何让Bootstrap的导航下拉菜单平滑上下滑动?

推荐答案

如果您更新到 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.

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