jQuery下拉菜单使用slideUp(）和slideDown(）

jQuery dropdown menu using slideUp() and slideDown()

本文关键字：slideDown slideUp 下拉菜单 jQuery      更新时间：2024-03-28

我创建了一个顶部栏，它有一个按钮，可以打开顶部栏上的下拉菜单。这个机制是有效的，但是当你多次点击按钮时，我遇到了一些问题，这会导致动画停止并处于无效状态。

这是我的密码：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"，我不确定升级到新版本是否值得。

我现在的问题是：
有没有办法在不升级到新版本的情况下修复这个"错误"？或者有没有像jQuery1.9.x那样的jQuery2.x迁移插件？

您需要的是stop(true,true);。通过传递CCD_ 2作为第一参数CCD_。

试试这个

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

小提琴这里

相关文章：