专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-11-24 12:25:15 基础教程 1 ℃

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

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

刚刚接触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…之间执行。

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

Tags:

最近发表
标签列表