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

Question

我正在尝试创建一个带有下拉菜单的边栏。我正在为下拉动画使用 Jquery 的 slideToggle() 函数。我的问题是，当下拉菜单上下动画隐藏其他下拉菜单时，动画显得断断续续。我在这里阅读了一些选项，但似乎找不到适合我的解决方案。

我设法在此处使用 JSFiddle 重新创建了侧边栏： https://jsfiddle.net/jckly/54m54jq3/

感谢您的帮助。

Answer 1

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

编辑：尝试在您的 JS 中使用回调，这样您就不会打开菜单，直到其他菜单完成隐藏： 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);
    });
});

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

jQuery slideToggle jumps at end of dropdown animation

javascript

css

jquery

slidetoggle