解决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

相关文章
相关标签/搜索