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在下拉动画结束时跳转

1 个答案: