使用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”，我不確定升級到新版本是否值得付出努力。

我現在的問題是：
有沒有辦法在不升級到新版本的情況下修復“bug”？ 或者有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("▲");
}
}

在這里小提琴