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

緣由分析

很簡單,toggle功能在1.9版本以後發生變化了。再也不支持多個事件輪流切換。摘一段官網說明:css

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.ide


解決辦法

簡直沒法理解爲何這麼好的功能被取消了,不過聽說是由於早期版本中存在着兩個toggle,兩個同名函數幹着不一樣的事情,後來被當作bug提出來了,就必須幹掉一個了。可是事情總歸是要作的,那麼怎麼實現點擊後多個事件輪流切換呢?函數

答案是設立一個標記,來記錄點擊,根據點擊次數不一樣響應不一樣時間。舉個例子:this


    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();
    });spa

相關文章
相關標籤/搜索