文档章节

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

程序猿小明
 程序猿小明
发布于 2014/06/16 16:49
字数 430
阅读 4269
收藏 4

原因分析

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


本文转载自:http://imxz.me/tech/frontend/jquery-toggle-display-none.html

共有 人打赏支持
程序猿小明
粉丝 3
博文 38
码字总数 2932
作品 0
厦门
私信 提问
使用jQuery快速高效制作网页交互特效——07 第七章 jQuery中的事件与动画

1、 jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件分类 ●基础事...

逆風〠飛翔
08/07
0
0
jQuery学习四 事件与事件对象

一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. .事件与事件对象 首先看一下我们经常使用的添加事件的方式: <!D...

天行健J
2012/12/10
0
0
Java程序员从笨鸟到菜鸟之(九十一)跟我学jquery(七)jquery动画大体验

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了。现在想想,实在...

长平狐
2012/11/12
95
0
Java程序员从笨鸟到菜鸟之(九十)跟我学jquery(六)jquery中事件详解

由于jquery本身就是web客户端的有力帮手,所以事件对于它来说就显得尤为重要了,事件是脚本编程的灵魂. 所以此内容也是jQuery学习的重点。 在传统的javascript中,注册一个事件也是非常简单的...

长平狐
2012/11/12
50
0
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

First Bad Version(leetcode278)

You are a product manager and currently leading a team to develop a new product. Unfortunately, the latest version of your product fails the quality check. Since each version is......

woshixin
16分钟前
1
0
executor 和task 优先于线程(68)

java.util.concurrent 包里有一个Executor 框架 基于接口的任务执行工具 只需要一行代码 提交一个runnable 方法 优雅的终止(必须做到,不然虚拟机可能不会退出) 对于负载不重的服务 Execut...

Java搬砖工程师
16分钟前
1
0
一条SQL查询语句是如何执行的

123

writeademo
18分钟前
1
0
hive 集成sentry

环境 apache-hive-2.3.3-bin apache-sentry-2.1.0-bin 1 2 sentry是目前最新的版本,支持hive的最高版本为2.3.3,hive版本如果高于2.3.3,会出一些版本兼容问题[亲测] hive快速安装 wget htt...

hblt-j
18分钟前
1
0
CSS中position属性( absolute | relative | static | fixed )详解

四个属性的特点 static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流...

简心
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部