这是一个示例：

<html>

<head>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $(".btn1").click(function(){

  $("p").toggle(); //toggle()方法进行显示隐藏交互事件，如果显示的就进行隐藏，如果是隐藏的就显示

  });

  $(".btn2").toggle(2000,function(){

     $(".div2").toggle(); //callback

   });

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<button class="btn1">Toggle</button>

<button class="btn2">Toggle2</button>

<div class="div1">http://www.cnblogs.com/sosoft/</div>

<div class="div2"  style="display:none">柔成</div>

</body>

</html>

　　示例中用到的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 参数。

PS：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

使用jQuery的toggle()方法对HTML标签进行显示、隐藏操作的更多相关文章

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

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

  2. jQuery 效果 - toggle() 方法切换元素的可见状态。

    定义和用法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(speed,callback, ...

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

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

  4. JQuery 的toggle() 方法如何使用？

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

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

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

  6. jQuery事件 - toggle() 方法

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

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

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

  8. Jquery的toggle()方法

    toggle()并不是仅仅能 显示/隐藏而已 它的格式如下 toggle(fn1,fn2,fn3.....) 也就是说,它的参数可以说不定数目的 若干个方法,然后每个方法按顺序轮番调用 $(docum ...

  9. JQuery设置和去除disabled属性 与 display显示隐藏

    //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...

随机推荐

  1. linux命令与技巧

    1.模糊查询:find / -name '*Eclipse*'2.获得管理员权限:sudo -i

  2. D. Palindromic characteristics

    time limit per test 3 seconds memory limit per test 256 megabytes input standard input output standa ...

  3. NETCore项目报错 An error occurred while starting the application

    在发布到IIS的webApi项目中,运行时报出以上错误, 解决方法: 1.打开发布目录文件夹,找到web.config文件 2.打开web.config找到stdoutLogEnabled=" ...

  4. C#: 旋转图片到正确位置

    当从iPhone等手机上传图片到服务器后,通常需要进行旋转处理,否则在进行图片压缩.缩放处理后会丢失正确的位置信息,导致显示的图片不处于正确的位置上. 处理的做法就是读取照片的Exif信息,并旋转到正 ...

  5. 喷水装置（一）（南阳oj6）（简单贪心）

    喷水装置(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描写叙述 现有一块草坪,长为20米.宽为2米.要在横中心线上放置半径为Ri的喷水装置.每一个喷水装置的效果都会让 ...

  6. Android 自己定义圆圈进度并显示百分比例控件（纯代码实现）

    首先,感谢公司能给我闲暇的时间,来稳固我的技术,让我不断的去探索研究,在此不胜感激. 先不说实现功能,上图看看效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  7. 谈谈c++纯虚函数的意义！

    纯虚函数的存在有什么意义呢?相信大学假设有c++这么课程.在讲到纯虚函数时,必然会讲到纯虚函数是面向接口编程的基础. 如今和大家分享下纯虚函数设计的原由.目的.产生的效果. 现代软件project很庞 ...

  8. leetcode 217 Contains Duplicate 数组中是否有反复的数字

     Contains Duplicate Total Accepted: 26477 Total Submissions: 73478 My Submissions Given an array o ...

  9. UITextView获取光标位置

    UITextRange *range = textView.selectedTextRange; //光标位置 CGRect  rect = [textView caretRectForPositio ...

  10. JSP-Runoob：JSP 动做元素

    ylbtech-JSP-Runoob:JSP 动做元素 1.返回顶部 1. JSP 动作元素 与JSP指令元素不同的是,JSP动作元素在请求处理阶段起作用.JSP动作元素是用XML语法写成的. 利用J ...