jquery1.9以上版本.toggle()的替代实现方法

boyanx2个月前技术教程7

像大多数前端开发者一样,青衿也经常会用到交互效果的往复切换,比如折叠面板的展开和折叠,动画效果的循环,点击效果的切换等等。

刚刚接触jQuery的时候青衿都是使用.toggle()方法。jquery的.toggle()方法可以添加 click 事件之间要切换的两个或多个函数,刚刚学习juqery的时候这个方法是非常好用的。

但是在1.9及以上版本中.toggle()却被移除了。让一些新手做click效果切换的时候就遇到了困难。不过有什么是jQuery不能解决的呢?一个方法倒下了,千千万万个方法涌现了出来。

青衿在这里就为大家推荐一个很简单的方法:

(function(){

//默认让切换符为true

var toggle = true;

//开始点击事件

$(".DIV").click(function () {

//让切换符等于他的反义,即原本为true现在为false,或者原本为false现在为true。

toggle = !toggle;

if (toggle) {

$(".DIV2").hide();

} else {

$(".DIV2").show();

}

})

});()

基本原理就是当我们完成一次if判断之后,切换符会和初始化时相反,每次点击事件都会让切换符在真假之间切换,代码也会依次在if…else…之间执行。

好了,同学们赶紧尝试一下吧!同时也欢迎大家踊跃留言交流,共同进步~!

标签: jquery 版本

相关文章

关于跨域GET、POST请求的小结

重点:跨域POST大量数据;JQuery:$.ajax/$.getJSON支持jsonp格式的跨域,但是只支持GET方式,暂不支持POST;CORS:w3c关于跨域的新方案,res.setHeader...

谈谈jQuery中的防冲突(noConflict)机制

许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个。在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,w...

JavaScript与jQuery: 前端开发的基石

引言在现代Web开发中,JavaScript已成为不可或缺的一部分。随着网页交互性的增加,开发者需要更高效的方式来管理和编写JavaScript代码。这正是jQuery等前端框架应运而生的原因。本文旨...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你 绝...

必看!2024 年 Web 双端使用 JavaScript 的全新趋势

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。JavaScript 对于创建...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。