『签 到』 开启辅助访问
 找回密码
 立即注册

扫一扫,访问微社区

只需一步,快速开始

QQ登录

只需要一步,快速开始

或者

[jquery开发] jQuery-toggle()与toggle(fn,fn)的用法

0 60
风起云甬 发表于 2020-3-13 15:08:20 |阅读模式 |复制链接
toggle()方法的效果就是切换元素的可见状态;即如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
例子:
  1. $(function(){
  2. $("#content").toggle();
  3. })

  4. <p id="content" style="display:none">这里原来是隐藏看不到的</p>
复制代码
当有点击事件时,另一区域可见状态切换可以这么写:
  1. $(document).ready(function(){
  2.   $("#test").click(
  3.   function(){
  4.    $("#content").toggle();
  5.   }
  6.   );
  7. });

  8. <p id="test"><input type="button" value="点击这里" /></p>
  9. <p id="content" style="display:none">当点击上面的“点击这里“字样,这里的内容将隐藏与显示之间切换</p>
复制代码
下面说一下toggle(fn,fn)方法的使用,效果是:每次点击后依次调用函数;如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发调用函数的功能,不需要另外.click(fn)了,我一开始操作此函数时就犯了错。

例子:

  1. $(document).ready(function(){
  2.     $("#test").toggle(function(){
  3.      $("#content").hide('slow');
  4.     },function(){
  5.      $("#content").show('fast');
  6.    });
  7. });

  8. <p id="test"><input type="button" value="点击这里" /></p>
  9. <p id="content" style="display:none">当点击上面的“点击这里“字样,这里的内容将隐藏与显示之间切换</p
复制代码


您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

发布资源 快速回复 站点服务大厅 搜索 官方群