解決 jQuery 高版本移除 toggle() 事件的兼容性方案

問題背景

jQuery 1.9+ 版本移除了 .toggle(fn, fn2, ...) 事件綁定方法（注意：非 .toggle() 動畫切換），導致舊代碼報錯 toggle is not a function。

兼容性補丁代碼

在引入 jQuery 後、業務代碼前插入以下代碼即可恢復功能：

(function($) {
    // 保存原有 toggle（動畫版）
    var oldToggle = $.fn.toggle;

    $.fn.toggle = function(fn, fn2) {
        // 非函數參數時走動畫邏輯
        if (!$.isFunction(fn) || !$.isFunction(fn2)) {
            return oldToggle.apply(this, arguments);
        }

        var args = arguments,
            guid = fn.guid || $.guid++,
            i = 0,
            toggler = function(event) {
                event.preventDefault();
                var lastToggle = ($._data(this, "lastToggle" + fn.guid) || 0) % i;
                $._data(this, "lastToggle" + fn.guid, lastToggle + 1);
                return args[lastToggle].apply(this, arguments) || false;
            };

        toggler.guid = guid;
        while (i < args.length) {
            args[i++].guid = guid;
        }
        return this.click(toggler);
    };
})(jQuery);

使用示例

$('#btn').toggle(
    function() { console.log('第一次點擊'); $(this).addClass('active'); },
    function() { console.log('第二次點擊'); $(this).removeClass('active'); },
    function() { console.log('第三次點擊'); $(this).toggleClass('highlight'); }
);

原理解析

• 利用閉包保存回調函數數組 args
• 用 $.guid 生成唯一標識，配合 $._data() 存儲點擊計數
• 每次點擊取模計算執行哪個回調
• 所有回調共享同一 guid，可通過任一函數 off('click') 解綁

替代方案對比

建議

1. 新項目避免使用 toggle(fn, fn2)，改用顯式狀態管理
2. 維護舊項目可引入本補丁或 jquery-migrate 插件
3. 注意區分 .toggle() (動畫) 與 .toggle(fn, fn2) (事件)，前者未被移除