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

2019独角兽企业重金招聘Python工程师标准>>>

原因分析

很简单，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();
    });

转载于:https://my.oschina.net/147258369/blog/280243