定义和用法

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 参数。

提示和注释

注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

jQuery 效果 - toggle() 方法切换元素的可见状态。的更多相关文章

  1. 用jQuery的toggle方法实现元素的左右滑动隐藏

    通常情况下给元素加toggle方法通常会是上下滑动隐藏,而有时我们又需要左右滑动隐藏怎么办呢 $(document).ready(function(){ $('#example').click(fun ...

  2. jQuery使用toggle()方法进行显示隐藏

    转自:https://www.cnblogs.com/sosoft/p/3460556.html 这是一个示例: 1 <html> 2 <head> 3 <script ...

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

    这是一个示例: <html> <head> <script type="text/javascript" src="https://code ...

  4. jQuery事件 - toggle() 方法

    1.切换元素的显示与隐藏状态 实例 切换 <p> 元素的显示与隐藏状态: $(".btn1").click(function(){ $("p").h ...

  5. jQuery 效果 - slideToggle() 方法

    实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: $(".btn1").click(function(){ $("p").slide ...

  6. jquery 复合事件 toggle()方法的使用

    定义和用法 toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 语法: $(selector).toggle(function1(),function2 ...

  7. 很实用的jQuery事件 - toggle() 方法

    实例 切换不同的背景色: $("p").toggle( function(){ $("body").css("background-color&quo ...

  8. jQuery 效果 - animate() 方法

    http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...

  9. JQuery 的toggle() 方法如何使用?

    JQuery中的toggle()方法,相当于点一个元素时,重复循环两个函数,而这两个函数可以作为toggle()函数的两个参数传进去,当第一次点击的时候会执行前面的参数,而第二次点击时执行的是后面的参 ...

随机推荐

  1. Python 生成器总结

    生成器的概念: 生成器不会把结果保存在一个系列中,而是保存在生成器的状态,在每次进行迭代时返回一个值,直到遇到StopIteration异常结束 生成器是这样一个函数,它记住上一次返回时在函数体中的位 ...

  2. sql join实例图解

    https://blog.codinghorror.com/a-visual-explanation-of-sql-joins/ 1. inner join: 所有满足join条件的两个table对应 ...

  3. winform打包发布安装包详解..

    winform打包发布安装包详解..   使用VS 自带的打包工具,制作winform安装项目 开发环境:VS 2008 Access 操作系统:Windows XP 开发语言:C# 项目名称:**管 ...

  4. [翻译] AsyncDisplayKit

    AsyncDisplayKit AsyncDisplayKit is an iOS framework that keeps even the most complex user interfaces ...

  5. 阿里云Quick BI——让人人都成为分析师

    在3月29日深圳云栖大会的数据分析与可视化专场中,阿里云产品专家潘炎峰(陌停)对大数据智能分析产品 Quick BI 进行了深入的剖析.大会现场的精彩分享也赢得观众们的一直认可和热烈的反响. Quic ...

  6. js图形库

    SVG.js viz.js graphviz的js实现版 raphael d3 (http://d3js.org/) JavaScript InfoVis Toolkit Flotr2 and Env ...

  7. nfs 安装配置

    系统环境:centos 6.4 x86_64 minimal,记得是199个安装包. 两台机器(可以是虚拟机): 192.168.1.150--->a机器 192.168.1.11-----&g ...

  8. 更改mysql数据存储路径

    1.检查mysql数据库存放目录 mysql -u root -prootadmin show variables like '%dir%'; quit; (查看datadir 那一行所指的路径) 2 ...

  9. Angular不同版本对应的Bootstrap组件

    AngularJS 1.x版本对应的 bootstrap组件库是ui-bootstrap; http://www.cnblogs.com/pilixiami/p/5597634.html Angula ...

  10. springMVC <mvc:interceptors>拦截器的使用

    首先在springMVC.xml配置如下代码 <!-- 拦截器 --> <mvc:interceptors> <bean class="com.base.Acc ...