Bootstrap 3 Dropdown Sliderown当Navbar崩溃时的奇怪行为

所以我在navbar下拉列表中添加了一些动画，但由于某些原因，最常接受的答案（Adding a slide effect to bootstrap dropdown）在小窗口大小上滑动时似乎破坏或变为“常规”大小。Bootstrap 3 Dropdown Sliderown当Navbar崩溃时的奇怪行为

因此，奇怪的是这似乎只与文章的效果基本show动画发布到发生：

// 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/这些线路到谷歌Chrome浏览器的控制台，改变我的决议案，一个地方导航仪崩溃了，它们全部破裂。（我延长动画时间，试图解决。）

正常：

Normal Menu

破碎效果基本show：

SlideUp

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

Expected Behavior

想法？

更新它与最后一个选项一起工作，因为它不会从封闭下拉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'); 
    }); 
});

来源

2014-10-08 Kyle Johnson

我也看到一个动画神器上了slideDown（）为好。它似乎跳到最后。我相信这也与“开放”类有关。 – 2014-10-08 22:25:41

我试过你的上面的解决方案，它似乎对我来说很好，使'.slideUp'动画像'.slideDown'一样无缝工作。这就是说我没有使用Bootswatch。 – Vercingetorix 2014-10-10 19:39:22

您是否在谈论我的Update 2中的解决方案？它似乎工作，但我觉得这个bug是在bootstrap.js不等待过渡。合拢的导航栏动画工作完美无瑕，但编码与下拉菜单的编码方式完全不同。 – 2014-10-10 19:45:35

很困难，而能够检查元素，但我有你的问题可能在于与类“容器预感下拉菜单“（或者，如果它不是下拉菜单，则实际上具有滚动条的那个元素）。我不认为你的jQuery有问题，但我会尝试添加一个样式来控制溢出属性。尝试将其设置为隐藏，以强制该框超出页面范围。主卷轴应该从那里处理它。然而，从用户体验的角度来看，我会告诫你创建一个有很多嵌套的菜单，这会给最终用户带来糟糕的体验。

来源

2017-05-15 18:01:11

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

来源

2017-05-30 09:13:49

Bootstrap 3 Dropdown Sliderown当Navbar崩溃时的奇怪行为

回答

相关问题