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 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
VUE实现密码验证与提示功能
2019/10/18 Javascript
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
基于python实现聊天室程序
2018/07/27 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
Python datetime 如何处理时区信息
2020/09/02 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
责任心演讲稿
2014/05/14 职场文书
护士2014年终工作总结
2014/11/11 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python