jquery - 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 控制台中，将分辨率更改为导航栏折叠的分辨率，然后它们都会损坏。 (我延长了动画时间来尝试排除故障。)

正常:

损坏的 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

如果无法检查元素，这会很困难，但我有预感，您的问题可能在于具有“drowpdown-menu”类的容器(或者如果不是下拉菜单，则实际附加了滚动条的任何元素 -菜单)。我不认为你的 jQuery 有问题，但我会尝试添加一个样式来控制溢出属性。尝试将其设置为隐藏以强制该框超出页面边界。主卷轴应该从那里处理它。然而，从用户体验的角度来看，我会警告您创建一个包含大量嵌套的菜单，这可能会给最终用户带来糟糕的体验。