导航栏折叠时的Bootstrap 3 Dropdown Slidedown奇怪行为答案

【问题标题】：Bootstrap 3 Dropdown Slidedown Strange Behavior when Navbar Collapsed导航栏折叠时的Bootstrap 3 Dropdown Slidedown奇怪行为
【发布时间】：2014-10-08 22:01:42
【问题描述】：

所以我在导航栏下拉菜单中添加了一些动画，但由于某种原因，当在小窗口尺寸上向上滑动时，最被接受的答案 (Adding a slide effect to bootstrap dropdown) 似乎会中断或变成“常规”尺寸。

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

// 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 的控制台中，将我的分辨率更改为导航栏崩溃的分辨率，然后它们都会中断。（我延长了动画时间以尝试排除故障。）

正常：

上滑失败：

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

想法？

更新它适用于最后一个选项，因为它不会从封闭的下拉 LI 元素中删除“开放”类。所以也许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');
  });
});

【问题讨论】：

我还在 slideDown() 上看到了一个动画工件。它似乎在最后跳跃。我相信它也与open 类有关。
我尝试了您的上述解决方案，它似乎对我来说可以很好地使.slideUp 动画像.slideDown 一样无缝工作。那就是说我没有使用 Bootswatch。
您是在谈论我的更新 2 中的解决方案吗？它似乎确实有效，但我觉得这个错误在 bootstrap.js 中而不是等待转换。折叠的导航栏动画完美无缺，但与下拉菜单的编码方式截然不同。
是的，谈到更新 2。它可能在 bootstrap.js 中，但我认为我没有像你那样仔细研究它。
好吧显然，这是设计使然。 'hidden.bs.dropdown' 只等待 CSS3 动画完成，而不是 jQuery。现在......如何用 CSS3 做到这一点？

标签： jquery twitter-bootstrap-3

【解决方案1】：

无法检查元素会很困难，但我有一种预感，您的问题可能出在具有“下拉菜单”类的容器上（或者如果它不是下拉菜单，则无论哪个元素实际上附加了滚动条-菜单）。我认为您的 jQuery 没有问题，但我会尝试添加一个样式来控制 overflow 属性。尝试将其设置为隐藏以强制框超出页面范围。主卷轴应该从那里处理它。但是，从用户体验的角度来看，我会提醒您创建包含大量嵌套的菜单，这可能会导致最终用户体验不佳。

【讨论】：

【解决方案2】：

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

【讨论】：