解决 jQuery 元素绑定 toggle 事件后元素变成隐藏的问题

今天给博客添加了文章归档页面，使用的是 ZWWoOoOo 提供的方法（http://zww.me/archives/25209），其中需要实现一个功能为点击之后切换显示和隐藏，以前也有使用过这个，但是这次使用发现出现 bug 了，具体来说，就是在用 jQuery 中的 toggle 实现点击事件切换时，发现绑定了该事件的元素全都变成隐藏的了。

最初我以为是自己主题中的其他 js 引起的冲突，后来经过排差发现不是这么回事，通过阅读 jQuery 的文档后，终于解决了这个问题。

原因分析

很简单，toggle 功能在 1.9 版本之后发生变化了。不再支持多个事件轮流切换。摘一段官网说明：

Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

解决办法

简直无法理解为什么这么好的功能被取消了，不过据说是因为早期版本中存在着两个 toggle，两个同名函数干着不同的事情，后来被当做 bug 提出来了，就必须干掉一个了。但是事情总归是要做的，那么怎么实现点击后多个事件轮流切换呢？

答案是设立一个标记，来记录点击，根据点击次数不同响应不同时间。举个栗子：

var flip = 0;
$('#al_expand_collapse').click(function(e) {
    if (flip++%2 === 0) {
        $al_post_list.show(400);
    } else {
        $al_post_list.hide(400);
    }
    e.preventDefault();
});