Navbar折叠时Bootstrap 3下拉滑动奇怪的行为

Question

所以我在导航栏下拉列表中添加了一些动画，但由于某种原因，在小窗口尺寸上向上滑动时，最常见的答案（Adding a slide effect to bootstrap dropdown）似乎会破坏或变为“常规”大小。

所以奇怪的是，这似乎只发生在发布文章的幻灯片动画中：

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

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(5000);
});

我可以将这些行复制并粘贴到http://bootswatch.com/default/上的Google Chrome控制台中，将我的分辨率更改为导航栏崩溃的分辨率，然后它们全部中断。 （我延长了动画时间以尝试排除故障。）

正常：

Broken SlideUp：

但出于某种原因，如果我运行$('.navbar').find('.dropdown-menu').slideUp(5000);，我会得到一个正常的行为菜单：

思想？

更新它适用于最后一个选项，因为它不会从封闭的下拉列表LI元素中删除“open”类。因此，在动画运行时，可能会过早地删除open类。

更新2 我可以使用preventDefault：

对其进行排序

// 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 1

如果没有能够检查元素这很困难，但我有一种预感，你的问题可能在于容器与课程＆＃34; drowpdown-menu＆＃34; （或者如果它不是下拉菜单，则实际上滚动条附加到它的任何元素）。我不认为您的jQuery存在问题，但我会尝试添加样式来控制溢出属性。尝试将其设置为隐藏以强制框超出页面范围。主卷轴应该从那里处理它。但是从用户体验的角度来看，我会提醒你创建一个包含大量嵌套的菜单，这可能会给最终用户带来糟糕的体验。

Answer 2

＆＃13;

＆＃13;

$(document).ready(function(){
    $(".class-name").click(function(){
        $(".class-name").slideToggle(1000);//hear you can change value of slidetoggle i.e "slow","fast", or any number
    });
});

＆＃13;

＆＃13;

＆＃13;