导航栏折叠时，Bootstrap 3下拉滑倒奇怪的行为 [英] Bootstrap 3 Dropdown Slidedown Strange Behavior when Navbar Collapsed

问题描述

所以我在导航栏下拉菜单中添加了一些动画，但是由于某些原因，它是最被接受的答案(

So I was adding some animations to the navbar dropdowns, but for some reason the most accepted answer (Adding a slide effect to bootstrap dropdown) seems to break or become "regular" sized when sliding up on small window sizes.

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

So the weird thing is this only seems to happen with the slideUp animation from the article posted:

// 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/，将我的分辨率更改为导航栏折叠的位置，然后它们全部断开. (我延长了动画时间来尝试并进行故障排除.)

I can copy and paste those lines into Google Chrome's console on http://bootswatch.com/default/, change my resolution to one where the navbars collapse, and they all break. (I extended the animation times to try and troubleshoot.)

正常:

损坏的幻灯片:

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

But for some reason, if I run $('.navbar').find('.dropdown-menu').slideUp(5000); I get a normal behaving menu:

有想法吗?

更新它可与最后一个选项一起使用，因为这不会从封闭的下拉LI元素中删除"open"类.因此，可能在动画运行时过早删除了open类.

Update It works with the last option because that doesn't remove the 'open' class from the enclosing dropdown LI element. So perhaps the open class is being prematurely removed while the animation is running.

更新2 我可以使用preventDefault对其进行排序:

Update 2 I can sorta fix it using a 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');
  });
});

推荐答案

如果无法检查元素很难，但是我直觉，您的问题可能出在带有"drowpdown-menu"类的容器上(或任何一个)元素实际上具有附加的滚动条(如果不是下拉菜单).我认为您的jQuery没问题，但是我会尝试添加一种样式来控制 overflow属性.尝试将其设置为隐藏"，以强制框超出页面范围.主滚动条应该从那里开始处理.但是，从UX的角度来看，我会提醒您创建带有大量嵌套的菜单，这可能会给最终用户带来糟糕的体验.

It's difficult without being able to inspect the elements but I have a hunch that your problem may lie with the container with the class "drowpdown-menu" (or whichever element actually has the scroll bar attached to it if it's not dropdown-menu). I don't think there's a problem with your jQuery but I would try adding a style to control the overflow property. Try setting it to hidden to force the box to go outside the bounds of the page. The main scroll should handle it from there. However from a UX point of view I would caution you on creating a menu with a lot of nesting which can result in a poor experience to the end user.

这篇关于导航栏折叠时，Bootstrap 3下拉滑倒奇怪的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！