关闭

jquery之toggle方法使用详解

来源:网络 文章列表 2019-05-20 8
jQuery toggle()方法使用详解。toggle英文翻译为切换,转换,指2种状态之间进行切换。添加两个或多个函数,以响应被选元素的 click 事件之间的切换。当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推。

toggle英文翻译为切换,转换,指2种状态之间进行切换。

大部分人对jquery中toggle的用法都是只知其一,不知其二。

toggle功能定义

1、添加两个或多个函数,以响应被选元素的 click 事件之间的切换。当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推。

2、toggle方法切换元素的可见状态。如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

toggle语法:

$(selector).toggle(speed,callback,switch)

参数示意: 

参数 描述
speed

可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数,则无法使用 switch 参数。

callback

可选。toggle 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

switch

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

  • True - 显示所有元素
  • False - 隐藏所有元素

如果设置此参数,则无法使用 speed 和 callback 参数。

 

通过上面我们知道,toggle的三个参数都是可选的,下面我们来做几个示例给大家看下jQuery toggle() 的使用方法。

 

绑定多个函数,多次点击依次切换执行

<div id="btntest">我是动态显示的</div>

$("#btntest").toggle(
  function(){
      $("div").html("第一次点击执行!");
  },
  function(){
      $("div").html("第二次点击执行!");
  });
});

 

切换元素的显示与隐藏效果,这是toggle比较常见的用法。

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>
$('#btntest').click(function () {
  $("div").toggle(500);
})
此处的 500 是隐藏显示的延迟时间,默认为0,也可以用"slow","normal"或"fast"
如果里面的值为true(toggle(true))时只能显示元素,值为false(toggle(false))时只能隐藏元素。

上例中toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能click触发)

要点总结:

1、toggle只能绑定在click事件上,只有click事件才可以触发。

2、toggle() 方法在 jQuery 版本 1.8 中被废弃,在版本 1.9 中被移除。

3、toggle可以绑定两个或两个以上的函数,依次执行。

4、切换元素的显示与隐藏效果

阿里云618优惠卷大放送

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论