javascript - 使用slideUp()和slideDown()的jQuery下拉菜单

Question

我创建了一个顶栏，其中有一个按钮可以打开顶栏上的下拉菜单。该机制有效，但是当您多次单击按钮时，我遇到了一些麻烦，这会导致动画停止并保持无效状态。

这是我的代码的一个摆弄: http://jsfiddle.net/HLaBb/

$("#SensorSelectContent").clearQueue();
$("#SensorSelectContent").stop();

if ($(".SensorSelectOpener").hasClass("open")) {
    $(".SensorSelectOpener").removeClass("open");
    $("#SensorSelectContent").slideUp();
    $(".SensorSelectButtonState").html("▼");
} else {
    $(".SensorSelectOpener").addClass("open");
    $("#SensorSelectContent").slideDown();
    $(".SensorSelectButtonState").html("▲");
}

快速按几次“选择传感器”按钮即可明白我的意思。

我发现，这个“bug”似乎不会出现在 jQuery v2+ 中。然而，我有很多代码使用 jQuery 的旧“API”，我不确定升级到新版本是否值得。

我现在的问题是:
有没有办法在不升级到新版本的情况下修复该“错误”？或者是否有像 jQuery 1.9.x 那样的 jQuery 2.x 迁移插件？

Answer 1

你需要的是stop(true,true);。通过传递 true 作为第一个参数 (clearQueue ) 队列中的其余动画将被删除并且永远不会运行。

试试这个

// which are displayed as a plot
function ToogleSensorsDropdown() {
//$("#SensorSelectContent").clearQueue(); //<-- no need to call this..if you add true..
$("#SensorSelectContent").stop(true,true);

if ($(".SensorSelectOpener").hasClass("open")) {
    $(".SensorSelectOpener").removeClass("open");
    $("#SensorSelectContent").slideUp();
    $(".SensorSelectButtonState").html("▼");
} else {
    $(".SensorSelectOpener").addClass("open");
    $("#SensorSelectContent").slideDown();
    $(".SensorSelectButtonState").html("▲");
}
}

fiddle here