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中的apply()方法和call()方法使用介绍
Jul 25 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
react实现同页面三级跳转路由布局
Sep 26 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 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
摩卡咖啡
2021/03/03 咖啡文化
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP时间处理类操作示例
2018/09/05 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
带你认识Django
2019/01/15 Python
python中什么是面向对象
2020/06/11 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
一月红领巾广播稿
2014/02/11 职场文书
副董事长岗位职责
2014/04/02 职场文书
有关环保的标语
2014/06/13 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL