Question

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

$("#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("▲");
}
}

fiddle here

使用slideUp（）和slideDown（）的jQuery下拉菜单

1 个答案: