当前位置:  编程技术>jquery

JQuery toggle使用举例

    来源: 互联网  发布时间:2014-10-04

    本文导语:  本节内容: JQuery中toggle的用法。 toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。 比如:对一个按钮的点击事件和一个DIV的背景,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的 背景色改为黑...

本节内容:
JQuery中toggle的用法。

toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。
比如:对一个按钮的点击事件和一个DIV的背景,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的
背景色改为黑色。

1,HTML代码:
 

代码示例:


此处显示 id "DivToggle" 的内容

2,定义的最初的样式:
 

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

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

3,JQuery代码:
 

代码示例:

$(
function() {
$("#btnShow").click(function(event) {
$("#DivToggle").toggle();
});
}
);

点击按钮之后DIV隐藏,再次点击DIV显示,然后循环。
这里可以手动设置元素的显示和隐藏,显示:toggle(true);隐藏:toggle(false);
还可以为元素的隐藏和显示设置速度。
$("#DivToggle").toggle(600);

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

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

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

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

例子:
 

代码示例:

$(
function(event) {
$("#btnShow").hover(OverOut, OverOut);
function OverOut(event) {
$("#DivToggle").toggle(600);
}
}
);

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

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

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

例子:
 

代码示例:

$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600);
}
$("#DivToggle").toggle(function() {
$("#btnShow").click(OverOut);
}, function() {
$("#btnShow").click(OverOut);
});
}
);

本身toggle(fn,fn,…)是用来给指定的元素加上Click事件,然后再对这个元素循环做toggle
里面的那些函数。突然感觉有点搅在那里了。像麻花一样。望牛牛能解释一下。
这样为了演示toggle的轮循函数的效果就没有办法,通过单击按钮,再改变Div的样式了。
改变DIV样式的代码:
 

代码示例:

$(
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"); });
});
}
);

到这里突然想到,要实现以上的效果,那就直接把事件加载到按钮上,也就是”btnShow”上面也就是先隐藏显示,然后改变DIV的样式。
例子:
 

代码示例:


$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600);
}

$("#btnShow").toggle(
OverOut, OverOut,
function() { $("#DivToggle").css({ "background": "Green" }); },
function() { $("#DivToggle").css({ "background": "Blue" }); }
);
}
);

 

如此,便可以实现以上效果,先隐藏,再显示,再改变样式。

以上通过几个例子,介绍了jquery toggle的用法,希望对大家有所帮助。


    
 
 

您可能感兴趣的文章:

  • jQuery概述,代码举例及最新版下载
  • jquery onpropertychange键盘事件用法举例
  • jQuery使任意div随意隐藏的代码举例
  • Jquery更换主题同时刷新iframe页面的代码举例
  • jquery禁用右键方法举例
  • Jquery 过滤器(first,last,not,even,odd)用法举例
  • Jquery删除元素的代码举例
  • jquery显示、隐藏div的方法举例
  • jQuery动态获取系统时间的代码举例
  • Jquery 定时局部刷新的代码举例
  • Jquery 显示隐藏更多文本的代码举例
  • jQuery 操作下拉列表框的代码举例
  • Jquery 限制只能输入数字的代码举例
  • jquery插件jTimer jquery定时器的用法举例
  • Jquery验证Email格式是否合法的代码举例
  • Jquery节点操作(插入,复制,替换,删除)举例
  • jquery控制自动刷新的代码举例
  • Jquery读取json文件的代码举例
  • Jquery验证用户名和密码的代码举例
  • jquery animate动画函数用法举例
  • jquery cookie插件的用法举例
  • jquery代码-如何使用jQuery来解析xml
  • 使用jquery局部刷新(jquery.load)从数据库取出数据
  • jquery代码-如何使用jQuery来检测右键和左键的鼠标单击两种情况
  • jquery使用jquery.zclip插件复制对象的实例教程
  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • jquery代码-如何使用多个属性来进行过滤
  • jQuery.holdReady()使用方法
  • JQuery插件fancybox无法在弹出层使用左右键的解决办法
  • 使用jQuery重置(reset)表单的方法
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery显示隐藏密码插件 jquery.toggle-password
  • jquery中交替点击事件toggle方法的使用示例
  • jQuery 开关切换插件 On-Off Toggle Switches
  • 页面元素绑定jquery toggle后元素隐藏的解决方法
  • jquery toggle()函数实例解析
  • 运用JQuery的toggle实现网页加载完成自动弹窗
  • Jquery hide与toggle方法实现超链接慢慢消失
  • jquery中toggle与slideToggle的区别
  • jquery toggle 显示与隐藏表格行
  • jquery中的常用事件bind、hover、toggle等示例介绍
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery
  • jQuery链接插件 jquery.biggerlink


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3