jQuery 在两个功能之间单击/切换

我正在寻找一种方法，让两个单独的操作/函数/“代码块”在单击某些内容时运行，然后在再次单击同一内容时运行完全不同的块。我把这个放在一起。我想知道是否有更有效/优雅的方式。我了解 jQuery.toggle() http://api.jquery.com/toggle但它没有按预期工作。

在这里工作：http://jsfiddle.net/reggi/FcvaD/1/ http://jsfiddle.net/reggi/FcvaD/1/

var count = 0;
$("#time").click(function() {
    count++;
    //even odd click detect 
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // on odd clicks do this
    if (isEven(count) === false) {
        $(this).animate({
            width: "260px"
        }, 1500);
    }
    // on even clicks do this
    else if (isEven(count) === true) {
        $(this).animate({
            width: "30px"
        }, 1500);
    }
});

jQuery has two methods called .toggle(). The other one [docs] http://api.jquery.com/toggle-event/ does exactly what you want for click events.

Note:看来至少从那时起jQuery 1.7，这个版本的.toggle is 已弃用，可能正是因为这个原因，即存在两个版本。使用.toggle更改元素的可见性只是更常见的用法。方法是在 jQuery 1.9 中删除.

下面是一个示例，说明如何实现与插件相同的功能（但可能会暴露与内置版本相同的问题（请参阅文档中的最后一段））。

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

DEMO http://jsfiddle.net/npwAz/1/

（免责声明：我并不是说这是最好的实现！我打赌它可以在性能方面得到改进）

然后用以下命令调用它：

$('#test').clickToggle(function() {   
    $(this).animate({
        width: "260px"
    }, 1500);
},
function() {
    $(this).animate({
        width: "30px"
    }, 1500);
});

更新2：

与此同时，我为此创建了一个合适的插件。它接受任意数量的函数，并且可用于任何事件。可以在 GitHub 上找到 https://github.com/fkling/jQuery-Function-Toggle-Plugin.