使用 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("▲");
}

按下“选择传感器”按钮几次，很快就会明白我的意思。

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

我现在的问题是：
有没有办法在不升级到较新版本的情况下修复该“错误”？或者是否有 jQuery 2.x 的迁移插件，就像 jQuery 1.9.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