slideToggle（）不会在上滑动或下滑动画

我正在使用下拉菜单。问题是，当菜单项被点击并且菜单应该向下滑动时，它会打开得太晚而不会动画。当它滑动时，它也不会生成动画。slideToggle（）不会在上滑动或下滑动画

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

来源

2015-05-13 muhaimin

呃，“粗鲁”和“拉特”是什么意思？ – freefaller

看到小提琴你会明白 – muhaimin

大声笑，它对我来说是完美的动画 – Aaron

块引用

代码缺少 “$（文件）。就绪（）” 事件处理程序。

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

来源

2015-05-13 14:13:59

忘记添加document.ready功能 –

不要在评论中说...让你的答案...否则人们必须弄清楚代码 – freefaller

@freefaller它在我的代码 –

它看起来像问题可能出在你的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>

来源

2015-05-13 14:25:49 apaul

我刚刚为Riteshk关于转换的答案添加了一条评论。有趣的持续时间。 jQuery Doc说它应该接受字符串或数字，但是你正确的说它使用了默认的String val提供的。看起来像一个错误？ – Daved

@Daved它将接受指定的字符串值，如“慢”或“快” – apaul

啊，touche。总是使用int，我忘了你可以说“快”或“慢”。 ;） – Daved

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

这里是我只在CSS代码解决方案更改密码。

这里的“过渡”你写“一切”包含附有验证码的所有元素会去过渡

强大的文本 ，因为我知道在转变特性的第一个参数是一些CSS-物业，所以你只需要只过境那些你想要的财产

欲了解更多详细信息，请点击此处查看转换属性的参考链接。

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

来源

2015-05-14 04:30:07

slideToggle（）不会在上滑动或下滑动画

回答

相关问题