相关疑难解决方法(0)

所以我在导航栏下拉列表中添加了一些动画,但由于某些原因,最常见的答案(将滑动效果添加到引导程序下拉列表)似乎在小窗口尺寸上滑动时会破坏或变为"常规"大小.

所以奇怪的是,只有发布的文章中的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'类.因此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');
  });
});

我试图让Twitter Bootstrap上的标准导航栏下拉菜单淡入而不是只显示.我已经尝试添加类fade,in但它似乎并没有消失.这是我的小提琴http://jsfiddle.net/byronyasgur/5zr4r/10/.

我尝试过另一种方式 - 例如关于这个问题的答案,但由于某些原因我无法使用jquery来定位下拉触发器.

下拉菜单将在引导程序（4.0）中运行的本机方式未设置动画。当折叠时，如何使它像导航栏一样“滑动”打开？

值得注意的是，下拉菜单位于导航栏中。见下面的代码； https://www.codeply.com/go/JKj5onR3ug

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Never expand</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse" id="navbarsExample01" style="">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a> …