javascript - jQuery 重置切换状态？

Question

我在按钮上使用toggle，如下所示:

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

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

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

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

        });
});

在我的代码中，我想“重置”切换状态。并使 slideDiv 向上滑动。

目前我正在尝试通过以下方式做到这一点:

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

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

问题是，运行该代码后，我必须按 button123 两次才能使切换再次工作。我假设这是因为我需要以某种方式重置它？

有什么想法吗？

Answer 1

切换函数使用内部机制来确定要执行 2 个回调中的哪一个。因此，假设它是一个增量计数器，其中如果该值是奇数，则执行第一个回调，否则执行第二个回调，当您更新切换处理程序外部元素的文本和显示时，不会执行内部计数器。因此 toggle 不知道文本更改为 + 的事实，这将导致切换调用第二个处理程序(如果在前一个单击处理程序中执行了一个处理程序)。

一种可能的解决方案是使用基于点击的解决方案而不是切换(另一个原因是切换在 1.9 中被删除)

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

演示:Fiddle