JQuery toggle使用分析


Posted in Javascript onNovember 16, 2009

今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。
比如:对一个按钮的点击事件和一个DIV的背景,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的
背景色改为黑色。
我们定义的HTML代码如下:
<body>
<input type="button" id="btnShow" value="Toggle"/>
<div id="DivToggle">此处显示 id "DivToggle" 的内容</div>
</body>
定义的最初的样式如下:

#DivToggle { 
height: 150px; 
width: 200px; 
margin: 50px; 
background-color: #6CC; 
}

在toggle(fn,fn,….);先明白一个toggle()的函数,主要是用来切换元素的显示状态。如果一个元素是显示的,那么调用.toggle()之后就变得隐藏了。

JQuery代码:

<script type="text/javascript"> 
$( 
function() { 
$("#btnShow").click(function(event) { 
$("#DivToggle").toggle(); 
}); 
} 
); 
</script>

点击按钮之后DIV隐藏,再次点击DIV显示,然后循环。

这里我们可以手动设置元素的显示和隐藏,显示:toggle(true);隐藏:toggle(false);

我们还可以为元素的隐藏和显示设置速度。

$("#DivToggle").toggle(600);

当然到这里我们可以想到我们经常在网页中碰到的将鼠标移上去显示出来,然后鼠标移开则隐藏掉的效果。

这里当然用到了一个hover(fnover,fnout)事件。我们只要将fnover,和fnout设置为以上的toggle(600)即可;

这里的fnover是鼠标移上去的事件函数, fnout是鼠标移开的事件函数。

我们将toggle(600)单独设置为一个函数来调用,这样看起来代表比较易读。

<script type="text/javascript"> 
$( function(event) { 
$("#btnShow").hover(OverOut, OverOut); 
function OverOut(event) { 
$("#DivToggle").toggle(600); 
} 
} 
); 
</script>

这样我们把鼠标移动到按钮上面,然后移开,就可以看到DivToggle的隐藏和显示的效果了。

为了演示toggle(fn,fn,…)是轮换操作的,我们使用上面的一个函数,然后再加一个使用btnShow的Click事件先隐藏显示DIV,然后该表DIV的样式。

显示隐藏的代码可以这样(事实上这段代码是有问题的,但是居然这样写也能实现要的效果):

<script type="text/javascript"> 
$( 
function(event) { 
function OverOut(event) { 
$("#DivToggle").toggle(600); 
} 
$("#DivToggle").toggle(function() { 
$("#btnShow").click(OverOut); 
}, function() { 
$("#btnShow").click(OverOut); 
}); 
} 
); 
</script>

回过头来看这段代码觉得很有问题,本身toggle(fn,fn,…)是用来给指定的元素加上Click事件,然后再对这个元素循环做toggle
里面的那些函数。突然感觉有点搅在那里了。像麻花一样。望牛牛能解释一下。
这样为了演示toggle的轮循函数的效果就没有办法,通过单击按钮,再改变Div的样式了。
改变DIV样式的代码这样:
<script type="text/javascript"> 
$( 
function(event) { 
function OverOut(event) { 
$("#DivToggle").toggle(600); 
} 
$("#DivToggle").toggle(function() { 
$(this).click(function() { $(this).css("background", "Blue"); }); 
}, function(event) { 
$(this).click(function() { $(this).css("background", "Green"); }); 
}); 
} 
); 
</script>

到这里我突然想到,要实现以上的效果,那就直接把事件加载到按钮上,也就是”btnShow”上面也就是先隐藏显示,然后改变DIV的样式。详细的代码如下:
<script type="text/javascript"> 
$( 
function(event) { function OverOut(event) { 
$("#DivToggle").toggle(600); 
} 
$("#btnShow").toggle( 
OverOut, OverOut, 
function() { $("#DivToggle").css({ "background": "Green" }); }, 
function() { $("#DivToggle").css({ "background": "Blue" }); } 
); 
} 
); 
</script>

这样能实现以上要的效果,就是先隐藏,再显示,再改变样式。
Javascript 相关文章推荐
javascript eval和JSON之间的联系
Dec 31 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
详解React-Todos入门例子
Nov 08 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
async/await地狱该如何避免详解
May 10 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
JavaScript OOP类与继承
Nov 15 #Javascript
JavaScript的eval JSON object问题
Nov 15 #Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 #Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 #Javascript
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 #Javascript
flash 得到自身url参数的代码
Nov 15 #Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 #Javascript
You might like
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PDO::getAttribute讲解
2019/01/28 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
javascript 函数速查表
2010/02/07 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python定时执行指定函数的方法
2015/05/27 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python求最大连续子数组的和
2018/07/07 Python
对python多线程与global变量详解
2018/11/09 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
代理人委托书
2014/08/01 职场文书
2014年城管工作总结
2014/11/20 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书