Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

看起来问题可能是你的css中的竞争过渡。

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

$('.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>

Answer 2

代码缺少$(document).ready()事件处理程序。

$(document).ready(function() { //forgot this very important
  $('.menu-vertical .nav-menu > li').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;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<body>
  <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>
</body>

</html>

Answer 3

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

这是我的解决方案仅在CSS代码中的更改代码。

这里的“转换”中你写的“all”包含了附加了此代码的所有元素将用于转换

强文因为我知道transition属性中的第一个参数是一些css-property所以你只需要只转换那些你想要的属性

有关详细信息，请在此处为您提供过渡属性的参考链接。

http://www.kirupa.com/html5/all_about_css_transitions.htm

slideToggle（）不会在幻灯片或向下播放动画

3 个答案: