这是一个示例：

<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. jquery转义字符之单引号

    jquery动态生成html,并且html中包含方法时,如 var varHtml = '<input type="button" value="点我删除" ...

  2. jQuery通过event获取点击事件的事件对象

    要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...

  3. Ubuntu 16.04下Markdown编辑器Haroopad

    1.下载deb包 地址:https://bitbucket.org/rhiokim/haroopad-download/downloads/haroopad-v0.13.2-x64.deb 这里是历史 ...

  4. 不折移动web不腾－－开启我的个人Mac之旅

    背景,非常久非常久曾经(听过)Linux,瞎玩 Mac mini,而今Linux下开发技能半身不遂,处于放任状态.明明就知道随着时间流逝会越陌生的东西越不想去抓住最后的余温,不知道这算不算放弃,反正迟 ...

  5. jsp,velocity,freemark页面引擎的比較

    在java领域.表现层技术主要有三种:jsp.freemarker.velocity. jsp是大家最熟悉的技术 长处: 1.功能强大,能够写java代码 2.支持jsp标签(jsp tag) 3.支 ...

  6. Android中apk动态载入技术研究（2）android插件化及实现

    了解了android中类载入的前期知识点后,来看看android中DexClassLoader详细的实现     详细载入流程例如以下:     宿主程序会到文件系统比方SD卡中去载入APK[1],然 ...

  7. Python FAQ1：传值，还是传引用？

    在C/C++中,传值和传引用是函数参数传递的两种方式.由于思维定式,从C/C++转过来的Python初学者也经常会感到疑惑:在Python中,函数参数传递是传值,还是传引用呢? 看下面两段代码: de ...

  8. 改善java程序的151个建议--数组和集合

    60.性能考虑,数组是首选,在基本类型处理方面.数组还是占优势的,并且集合类的底层也都是通过数组实现.建议在性能要求较高的场景中使用数组替代集合. 61.假设有必要.使用变长数组:我们能够通过对数组扩 ...

  9. 微信JS-SDK怎样使用

    前两天要用到微信JS库的的一句话--wx.closeWindow();可是整个调用过程有点儿泪奔了.. .. 尽管开发人员平台上说的清清楚楚,可是使用起来就是not ok! 一,绑定域名 登录到微信公 ...

  10. Apache Kafka-0.8.1.1源代码编译

    作者:过往记忆 | 新浪微博:左手牵右手TEL | 能够转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明博客地址:http://www.iteblog.com/文章标题:<Apac ...