• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 使用toggle()方法进行显示隐藏

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

作者:坦GA的博客 字体:[增加 减小] 来源:互联网 时间:2017-08-26

坦GA的博客通过本文主要向大家介绍了toggle,显示,隐藏等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

原文地址:http://www.cnblogs.com/sosoft/p/3460556.html

这是一个示例:

 1 <html> 
 2 <head> 
 3 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
 4 <script type="text/javascript"> 
 5 $(document).ready(function(){ 
 6   $(".btn1").click(function(){ 
 7   $("p").toggle(); //toggle()方法进行显示隐藏交互事件,如果显示的就进行隐藏,如果是隐藏的就显示 
 8   }); 
 9   $(".btn2").toggle(2000,function(){ 
10      $(".div2").toggle(); //callback
11    }); 
12 }); 
13 </script> 
14 </head> 
15 <body> 
16 <p>This is a paragraph.</p> 
17 <button class="btn1">Toggle</button> 
18 <button class="btn2">Toggle2</button> 
19 <div class="div1">http://www.cnblogs.com/sosoft/</div> 
20 <div class="div2"  style="display:none">柔城</div> 
21 </body> 
22 </html>

定义和用法

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 的元素)。

 

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery复合事件结合toggle()方法的用法示例
  • slideToggle+slideup实现手机端折叠菜单效果
  • jquery 中toggle的2种用法详解(推荐)
  • 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
  • jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
  • jquery点击改变class并toggle的实现代码
  • 实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
  • jQuery toggle 代替方法
  • jQuery点击改变class并toggle及toggleClass()方法定义用法
  • jquery中toggle函数交替使用问题

相关文章

  • 2017-08-16jquery取消选择select下拉框示例代码
  • 2017-08-16基于jquery实现人物头像跟随鼠标转动
  • 2017-08-16jQuery实现的简单排序功能示例【冒泡排序】
  • 2017-08-16jQuery异步获取json数据方法汇总
  • 2017-08-16JQuery中dataGrid设置行的高度示例代码
  • 2017-08-16Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
  • 2017-08-16jQuery UI仿淘宝搜索下拉列表功能
  • 2017-08-16基于jquery的用鼠标画出可移动的div
  • 2017-08-16easy ui datagrid 从编辑框中获取值的方法
  • 2017-08-16基于JQuery的浮动DIV显示提示信息并自动隐藏

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery基于ajax实现带动画效果无刷新柱状图投票代码
    • jQuery手动点击实现图片轮播特效
    • AJAX分页的代码(后台asp.net)
    • 影响jQuery使用的14个方面
    • jquery实现的树形目录实例
    • PHP+mysql+Highcharts生成饼状图
    • jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
    • jquery根据td给相同tr下其他td赋值的实现方法
    • 轻松使用jQuery双向select控件Bootstrap Dual Listbox
    • JQuery与iframe交互实现代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有