CODEWITHSUNDEEP
javascriptjqueryhtml
RononDex
RononDex

Reputation: 4173

jQuery dropdown menu using slideUp() and slideDown()

I have created a top-bar that has a button that opens a dropdown menu on the top bar. The mechanism works, however I am having some trouble when you make multiple-clicks on the button, that causes the animation to stop and stay in an invalid state.

Here is a fiddle with my code: 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("▲");
}

Press on the button "Choose Sensors" a few times really quick to see what I mean.

I found out, that this "bug" seems not to appear in jQuery v2+. However I have a lot of code that uses the old "API" from jQuery and I am not sure if upgrading to a newer version is worth the effort.

My question now is:
Is there a way to fix that "bug" without upgrading to a newer version? Or is there a migration plugin for jQuery 2.x like there was for jQuery 1.9.x ?

Upvotes: 0

Views: 210

Answers (1)

bipen
bipen

Reputation: 36531

what you need is stop(true,true);. with passing true as first argument (clearQueue ) the rest of the animations in the queue are removed and never run.

try this

// 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

Upvotes: 2

Related Questions