1. 程式人生 > >解決jQuery元素繫結toggle事件後元素變成隱藏的問題

解決jQuery元素繫結toggle事件後元素變成隱藏的問題

原因分析

很簡單,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;
    $(".expandAll").click(function(e){
    if (flip++ % 2 === 0){
        $.each($(".table_tag"),function(i,item){
            var openDiv = $(this).find("div[name='open_div']");
            var _loc2 = $(openDiv).parent();
            var id = $(openDiv).attr("title");
            var _loc1 = $("#"+id).find("table");
            _loc2.toggleClass("table_tag_over");
            
            $(openDiv).addClass("close");
            _loc2.find(".p").show();
            //$("#"+id).animate({height:_loc1.height()});
            $("#"+id).css('height', _loc1.height());
        });
//         $(this).removeClass("collapseAll").addClass("expandAll");    
    }else{
        $.each($(".table_tag"),function(i,item){
            var openDiv = $(this).find("div[name='open_div']");
            var _loc2 = $(openDiv).parent();
            var id = $(openDiv).attr("title");
            var _loc1 = $("#"+id).find("table");
            _loc2.toggleClass("table_tag_over");
            
            $(openDiv).removeClass("close");
            _loc2.find(".p").hide();
            //$("#"+id).animate({height:0});
            $("#"+id).css('height', 0);
        });
//         $(this).removeClass("expandAll").addClass("collapseAll");
    }
    e.preventDefault();
    });