jQuery重置切换状态？

Question

I'm using toggle on a button like so:

$('#button123').toggle(function() {
        $("#button123").text("-");

        $("#slideDiv").slideDown( "fast", function() {

        });
}, function() {
        $("#button123").text("+");

        $("#slideDiv").slideUp( "fast", function() {

        });
});

Further down in my code I want to "reset" the toggle state. and make slideDiv slide back up.

Currently I am trying to do that by:

    $("#button123").text("+");

    $("#slideDiv").slideUp("fast", function() {
        // Animation complete.
    });

The problem is that after running that code I have to press button123 twice for the toggle to work again. I'm assuming this is because I somehow need to reset it?

Any ideas?

Answer 1

The toggle function uses an internal mechanism to determine which of the 2 callbacks to be executed. So assuming it is an incremental counter where if the value if the value is odd then the first callback else the second callback is executed, when you update the text and display of the elements outside of the toggle handlers the internal counter is not executed. So toggle does not know about the fact that the text is changed to + which will result in toggle calling the second handler(if in the previous click handler one was executed).

One possible solution is to use a click based solution instead of toggle(another reason is toggle was removed in 1.9)

$('#button123').click(function () {
    var text = $.trim($(this).text());
    $(this).text(text == "-" ? '+' : '-');
    if (text == '-') {
        $("#slideDiv").slideUp("fast", function () {});
    } else {
        $("#slideDiv").slideDown("fast", function () {});
    }
});

Demo: Fiddle