JQuery入门――事件切换之toggle()方法应用介绍

CeiWCJ 2013-02-05

1、在toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这个函数轮番调用，其语法如下：toggle(fn, fn2, [fn3, fn4,...])，其中fn、fn2、fn3、fn4等函数依次调用。

2、示例代码：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>toggle方法</title> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<style type="text/css"> 
body{font-size:13px} 
img{border:solid 1px #ccc;padding:3px} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$("img").toggle(function(){ 
$("img").attr("src","Images/img05.jpg"); 
$("img").attr("title",this.src); 
},function(){ 
$("img").attr("src","Images/img06.jpg"); 
$("img").attr("title",this.src); 
},function(){ 
$("img").attr("src","Images/img07.jpg"); 
$("img").attr("title",this.src); 
} 
) 
}) 
</script> 
</head> 

<body> 
<img /> 
</body> 
</html>

3、效果图预览：

第一次点击：

JQuery入门――事件切换之toggle()方法应用介绍

第二次点击：

JQuery入门――事件切换之toggle()方法应用介绍

CeiWCJ

CeiWCJ

相关推荐

ionic实现带字的toggle滑动组件

在网上找了下其他的实现，感觉没得类似的，也没发现合适的，于是自己试着定义了一个凑合着用。看效果图边缘有模糊锯齿现象，可能是由于像素的影响，在android和ios手机上表现非常流畅。其实实现起来也很简单，主要是算好滑块的位置，滑动用的是css的transf

ZillahV0 / 0评论 2016-08-27

vue实现 toggle显示隐藏效果

背景介绍jQuery中有个toggle()方法，可以切换元素的显示状态，在用vue时如果不引入jQuery如何实现这种效果？如果控制一个dom或多个dom我们可以在data中定义对应的flag，每次点击事件发生时 flag=!这样点击的dom可以做的显示或

yaocong / 0评论 2019-07-01

前端 CSS : 1# 纯 CSS 实现万圣节 toggle 控件

<label for="switch-input" class="halloween-label">. family=Kodchasan');font-family: 'Kodchasan';font-s

武林半侠 / 0评论 2019-06-28

前端每日实战：158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。代码解读定义 dom，容器 .umbralla 中包含

ajhongshaorou / 0评论 2019-06-28

前端每日实战：156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。}以上是舷窗关闭时的样子，接下来绘制舷窗打开时的效果。

武林半侠 / 0评论 2019-06-28

精读《Epitath 源码 - renderProps 新用法》

1 引言很高兴这一期的话题是由 epitath 的作者 grsabreu 提供的。前端发展了 20 多年，随着发展中国家越来越多的互联网从业者涌入，现在前端知识玲琅满足，概念、库也越来越多。虽然内容越来越多，但作为个体的你的时间并没有增多，如何持续学习新知

ArthursL / 0评论 2019-06-28

Bootstrap 3: 图标转换事件 Change icons when toggle

jQuery 遍历 - closest() 方法本例演示如何通过 closest() 完成事件委托。两者之间的差异尽管微妙，却很重要：。从当前元素开始从父元素开始沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。沿 DOM 树向上遍历，直到文档的

乔乔 / 0评论 2016-07-20

jQuery：无限循环两个或者多个事件 click / toggle between two functions

Note: It seems that at least since jQuery 1.7, this version of .toggle is deprecated, probably for exactly that reason, namely t

xiuping0 / 0评论 2016-07-19

JQuery使用积累

uid=21153026&do=blog&cuid=2041189. $(".backgroundDiv").css({"opacity":"0.5"}).fadeIn('norm

t0ckh / 0评论 2011-08-24

《前端架构设计》读后笔记

做前端工作一段时间了，也写了不少的项目。但是突然好像快要失去了兴趣。美工、后台、项目经理、测试等人员多层夹击。测试说，这样做更符合大众习惯，这样的流程才正确。作为一名前端架构师，你的工作是不断地探索和评估新的技术、平台、方法和框架。世界上没有一刀切式的解决

liwusen / 0评论 2019-06-27

前端每日实战：5# 视频演示如何用 CSS 创作一个立体滑动 toggle 交互控件

效果预览按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。源代码下载请从 github 下载。

Phoebe的学习天地 / 0评论 2019-06-27

jQuery toggle() 没有显示，直接消失

今天在学习使用jQuery里面的动画功能，animate(),为了方便显示及显示效果测试，打算采用toggle函数，使动画能来回的移动。写了以下一段代码：。以上代码可以让页面中的div方块移动起来，但是加入toggle()之后，出现了对应div直接消失的问

黑色幽默 / 0评论 2013-12-02

Jquery 使用toggle()时，如何判断状态

<div id="mDiv" style="display:none">DIV1</div>判断它是否显示的话可以用is()方法，具体可以这么写

83453065 / 0评论 2012-12-20

jQuery的toggle方法

<!<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. <script type="text

83500391 / 0评论 2012-10-19

Jquery中的hover()和toggle()用法

当鼠标移出这个元素时，会触发指定的第二个函数。//当鼠标放在表格的某行上时将class置为over，离开时置为out。});toggle: 每次点击时切换要调用的函数。//每次点击时轮换添加和删除名为selected的class。});两个函数都能实现轮番

JeWangZhe / 0评论 2012-03-15

css与attr、trigger()与toggle()的区别

<select multiple="multiple" class="content" id="select2" style="width: 100px; font-size:12

每天积累一点点 / 0评论 2011-03-08

jQuery实现左右滑动的toggle方法

我们知道使用 jQuery 来实现上下移入移除，可以直接使用 slideUp() 和 slideDown() 方法。slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的 display 属性值为 “none”，当调用 sli

81423067 / 0评论 2018-03-03

jQuery复合事件结合toggle()方法的用法示例

本文实例讲述了jQuery复合事件结合toggle()方法的用法。分享给大家供大家参考，具体如下：。toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。$.toggle<br>当指定元素被点击时，在

80473064 / 0评论 2017-06-10

Javascript实现div的toggle效果实例分析

本文实例讲述了Javascript实现div的toggle效果。分享给大家供大家参考。if //如果是隐藏的就打开

yfisaboy / 0评论 2015-06-09

jquery 中toggle的2种用法详解(推荐)

$.toggle;//此处的 500 是隐藏显示的延迟时间，默认为0，也可以用"slow","normal"或"fast". //如果里面的值为true时只能显示元素，值为false时只能隐藏元素

85443563 / 0评论 2019-04-26

使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

$("p").toggle(); //toggle()方法进行显示隐藏交互事件，如果显示的就进行隐藏，如果是隐藏的就显示。toggle() 方法切换元素的可见状态。

83473469 / 0评论 2016-09-01

jQuery基于toggle实现click触发DIV的显示与隐藏问题分析

本文实例讲述了jQuery基于toggle实现click触发DIV的显示与隐藏。分享给大家供大家参考，具体如下：。<input type="button" id="btn" title="Click

Web全栈笔记 / 0评论 2016-06-12

jquery点击改变class并toggle的实现代码

<p id="p2" class="bg1" onClick="toggle1" style="height:31px">点击此处显示或隐藏上面部分并更换自己的样式

Clarence / 0评论 2019-04-25

jQuery toggle 代替方法

});今天在做一个项目，抄了别人网站上的一代码，发现怎么都无法实现，在我急得不想再搞时，想到会不会是jquery 的版本问题？随后把jquery 的版本降来1.8，功能实现了，我自己的jqurey 版本是1.11.1的，原来是版本的问题，原因找到了就好办了

江湖郎中 / 0评论 2016-03-22

jQuery点击改变class并toggle及toggleClass()方法定义用法

我滴古老风格，废话不多说，贴代码了。<p id="p2" class="bg1" onClick="toggle1" style="height:31px">点击此

草莓酱 / 0评论 2015-12-11

jquery中toggle函数交替使用问题

html中有几个btn触发toggle函数，想要实现的功能是：点击每个toggle时将其他toggle函数的计数全部清零，试过removedata不起作用，是否有更好的办法呢。<a href="javascript:;" data

warhin / 0评论 2019-04-21

jQuery中toggle()函数的使用实例

今天遇到一个有趣的例子，将它记录下来。一个一级菜单，里边有一个二级菜单，二级菜单是通过锚点来链接页面元素的。想要实现的效果是当点击锚点时，页面链接到相应锚点，同时二级菜单隐藏，再点击一级菜单时，继续执行。。其中试了很多种方法都不行，最后通过读jquery的

xiongfeng / 0评论 2019-04-20

jQuery中animate用法实例分析

本文实例讲述了jQuery中animate用法。分享给大家供大家参考。这是一个简单的animate函数尝试。</script>希望本文所述对大家的jQuery程序设计有所帮助。

warhin / 0评论 2015-03-09

jQuery中hover方法和toggle方法使用指南

jQuery提供一些方法将两种事件效果合并到一起，比如：mouseover、mouseout；keyup、keydown等。hover一个模仿悬停事件的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。toggle 每次点击时切

yaasshole / 0评论 2019-04-20

jquery中show()、hide()和toggle()用法实例

本文实例讲述了jquery中show()、hide()和toggle()用法。分享给大家供大家参考。这里介绍了jquery效果：show()方法、hide()方法和toggle()方法现实应用场景：QQ面板里我的好友分组。<button id=&qu

81971235 / 0评论 2019-04-19

jquery中的常用事件bind、hover、toggle等示例介绍

$.ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具有类似的效果。但是也有一些差异：。当一个文档完全下载到浏览器中时，会触发window.onload事件。由空格分隔多个事件。必须是有

84533871 / 0评论 2019-04-18

页面元素绑定jquery toggle后元素隐藏的解决方法

言归正传，我今天在写毕业设计的时候，在给一个元素绑定jquery的toggle方法之后奇迹发生了，绑定这个方法的元素全部隐藏了。其实具体原因我也不知道，我通过查找资料才得知，原来jquery在1.9版以后功能发生了变化，不在支持多个事件轮流切换了，搞了半天

melissahexiu / 0评论 2014-03-27

运用JQuery的toggle实现网页加载完成自动弹窗

toggle()事件 它主要切换元素的可见状态。HTML 代码: 代码如下：。<p>Hello</p><p style="display: none">Hello Again</p> jQ

CeiWCJ / 0评论 2014-03-18

Jquery的hide及toggle方法让超链接慢慢消失

现在，只要你点击超链接，超链接就会慢慢的消失。“return false"表示保留默认行为，因此页面不会跳转。

88487901 / 0评论 2013-09-06

JQuery toggle使用分析

今天重点一个toggle(fn,fn,….)函数,主要是用来切换某个事件的轮换操作。我们定义的HTML代码如下： <body> <input type="button" id="btnShow" v

CeiWCJ / 0评论 2009-11-16

jQuery toggle()设置CSS样式

toggle() 切换元素的可见状态。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 示例 切换所有段落的可见状态。HTML 代码: <p>Hello</p><p style="display:

scssqly轩 / 0评论 2009-11-04

jquery不支持toggle()高(新)版本的问题解决

在js代码中引入以下代码，让高版本的jquery兼容toggle事件。// Save reference to arguments for access in closure. // link all the functions, so any of th

PHP100 / 0评论 2019-03-28

[React] Make Controlled React Components with Control Props

Sometimes users of your component want to have more control over what the internal state is. In this lesson we'll learn how to a

跨越美利坚面试创业技术培训 / 0评论 2017-12-15

js中toggle()及toggleClass()的使用详解

在javascript中toggle()为连续点击事件,当里面含有多个function(){}函数时,每次点击依次执行里面的function的函数,直至最后一个.随后每次点击都重复对这几个函数的轮番调用,toggle的语法如下。toggle;但当toggl

软件设计 / 0评论 2017-05-23