jQuery slideToggle在下拉动画结束时跳转

Question

我试图用下拉菜单创建一个侧栏。我为下拉动画使用Jquery的slideToggle()函数。我的问题是，当下拉动画上下隐藏其他下拉菜单时，动画显得波涛汹涌。我已阅读了一些选项，但似乎无法找到适合我的解决方案。

我设法重新与这里的jsfiddle边栏： https://jsfiddle.net/jckly/54m54jq3/

感谢您的帮助。

Answer 1

这是由于你的动画项目的填充。基本上，jQuery必须对高度和填充都进行动画处理，这使得它不太流畅。看到这个版本没有填充： https://jsfiddle.net/54m54jq3/1/ 我建议在每个菜单项中添加另一个div，并对其应用填充。

编辑： https://jsfiddle.net/54m54jq3/2/

$('.dropdown').on('click', function() { 
    var continent; 
    $('.dropdown').not(this).slideToggle(300, function() { 
     continent = $(this).clone().children().remove().end().text().toLowerCase().trim(); 
     continent = '.' + continent; 
     console.log(continent); 
     $(continent).slideToggle(300); 
    }); 
});