javascript - slideToggle() 不在向上或向下滑动时设置动画

Question

我正在制作下拉菜单。问题是，当单击菜单项并且菜单应该向下滑动时，它打开得晚并且没有动画。当它应该向上滑动时它也没有动画。

$('.menu-vertical .nav-menu > li').on('click', function(e) {
  e.preventDefault();
  $(this).find('ul').slideToggle('2000', 'swing');
});

.menu-vertical .nav-menu li ul {
  position: relative;
  background: #f5f5f5 !important;
  top: 0;
  display: none;
  transition: all .4s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="menu-vertical">
  <ul class="nav-menu">
    <li>this is head
      <ul>
        <li>this is one</li>
        <li>this is one</li>
        <li>this is one</li>
        <li>this is one</li>
      </ul>
    </li>
    <li>head is head</li>
    <li>head is head</li>
  </ul>
</nav>

Answer 1

看起来问题可能出在您的 CSS 中的竞争过渡。

此外，幻灯片的时间应该是数字而不是字符串。当作为字符串传递时，您将获得默认的 400 毫秒计时，而不是您尝试指定的 2000 毫秒计时。

$('.menu-vertical .nav-menu > li').on('click', function(e) {
  e.preventDefault();
  $(this).find('ul').slideToggle(2000, 'swing'); // change '2000' to 2000
});

.menu-vertical .nav-menu li ul {
  position: relative;
  background: #f5f5f5 !important;
  top: 0;
  display: none;
  /*transition: all .4s ease; <- remove this bit*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="menu-vertical">
  <ul class="nav-menu">
    <li>this is head
      <ul>
        <li>this is one</li>
        <li>this is one</li>
        <li>this is one</li>
        <li>this is one</li>
      </ul>
    </li>
    <li>head is head</li>
    <li>head is head</li>
  </ul>
</nav>