文档章节

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

程序猿小明
 程序猿小明
发布于 2014/06/16 16:49
字数 430
阅读 4238
收藏 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
第78天:jQuery事件总结(一)

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

半指温柔乐
2017/11/08
0
0
50个必备的实用jQuery代码段(1)

本文会给你们展示50个jquery代码片段,这些代码能够给 你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你 又...

postdep
2014/02/19
0
0
jquery的一些用法 有用的用法。

AJAX 框架 用Asp.net ajax 还是 Jquery? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NETAJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery,众多的 $g...

雪中漫步
2010/03/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

搬瓦工镜像站bwh1.net被DNS污染,国内打不开搬瓦工官网

今天下午(2018年10月17日),继搬瓦工主域名bandwagonhost.com被污染后,这个国内的镜像地址bwh1.net也被墙了。那么目前应该怎么访问搬瓦工官网呢? 消息来源:搬瓦工优惠网->搬瓦工镜像站b...

flyzy2005
今天
1
0
SpringBoot自动配置

本篇介绍下,如何通过springboot的自动配置,将公司项目内的依赖jar,不需要扫描路径,依赖jar的情况下,就能将jar内配置了@configuration注解的类,创建到IOC里面 介绍下开发环境 JDK版本1.8 spr...

贺小五
今天
3
0
命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
今天
1
0
OSChina 周四乱弹 —— 上帝对我单身年限的惩罚越来越长了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享张卫健的单曲《身体健康》 《身体健康》- 张卫健 手机党少年们想听歌,请使劲儿戳(这里) 昨天是重阳节咯, 可惜小小编辑总是晚...

小小编辑
今天
12
1
django rest framework 外键序列化方法与问题总结

django rest framework 外键序列化方法与问题总结 当借口中需要出现一对多关系的时候,我们可以用rest_framwork的序列化功能来处理,代码如下. # models.pyfrom django.db import modelscl...

_Change_
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部