解决jQuery元素绑定toggle事件后元素变成隐藏的问题
解决jQuery元素绑定toggle事件后元素变成隐藏的问题
程序猿小明 发表于4年前
解决jQuery元素绑定toggle事件后元素变成隐藏的问题
  • 发表于 4年前
  • 阅读 3952
  • 收藏 4
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 需要实现一个功能为点击之后切换展开和收缩,以前也有使用过这个,但是这次使用发现出现bug了,具体来说,就是在用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();
    });


标签: jquery toggle
共有 人打赏支持
粉丝 4
博文 38
码字总数 2932
评论 (0)
×
程序猿小明
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: