jquery的toggle实现文字隐藏与显示

原创 2012年03月27日 10:39:23
//toggle实现文字的显示与隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js">
</script>
<script language="javascript">
$(document).ready(function(){
	$("#btn1").toggle(function(){
			
			$("p").hide("slow");
			},function(){
				$("p").show("slow");
				
		
		});
		
	});

</script>
</head>

<body>
<p style="background:#3F3">this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
</p>
<input type="button" value="显示/隐藏" id="btn1">
</body>
</html>


显示与隐藏切换toggle方法

show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。比如显示的元素,那么就要调用hide,反之亦然。 对于这样...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年08月01日 23:17
  • 2627

jquery使用toggle时如何设置两个状态的文字,一句代码搞定

$(".slide").click(function(){ $(this).next().toggle("nomal",function(){$(this).prev().html()=="+ 展开...
  • sysdzw
  • sysdzw
  • 2014年12月24日 15:36
  • 3675

jquery 实现超出部分隐藏,鼠标移动上显示全部文字

css #tooltipdiv {  position: absolute;  border: 1px solid #333;  background: #f7f5d1;  padding:...
  • billhepeng
  • billhepeng
  • 2012年04月14日 19:54
  • 8194

jquery实现多余文字显示或隐藏

  • 2017年06月24日 15:46
  • 3KB
  • 下载

jquery 点击函数切换 toggle()

toggle(fn,fn) 每次点击时切换要调用的函数。 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番...
  • morley_wang
  • morley_wang
  • 2012年11月22日 09:26
  • 37601

Android沉浸式模式实现导航栏与状态栏的隐藏,上滑呼出导航栏与状态栏

Android沉浸式状态栏被官方又称作沉浸式模式。 当启用该模式,应用程序的界面将占据整个屏幕,自动隐藏系统的状态栏和导航栏,让应用程序内容可以在最大显示范围呈现,增加大屏体验,而当需要查看通知的时...
  • Allisonton
  • Allisonton
  • 2017年09月16日 10:45
  • 558

HTML5表单中password输入框的文字显示与隐藏实现

HTML5表单中对于密码输入框password类型可以隐藏用户输入的内容,但有时候会用到允许用户自由显示或者隐藏输入框内容: 要实现这个功能首先想到的是用js动态改变input的type类型,...
  • cordova
  • cordova
  • 2016年03月11日 09:47
  • 33356

JQuery的toggle()方法把元素隐藏了的解决方案

JQuery的toggle()方法把元素隐藏了的解决方案 JQuery的toggle()本来是用来切换几种状态之间的变化的,但是我们在使用的时候,遇到了一种情况就是被绑定toggle()的元素被隐藏了...
  • qq_37943295
  • qq_37943295
  • 2017年07月20日 15:53
  • 596

很实用的jQuery事件 - toggle() 方法,简单实现显示隐藏的功能

很实用的jQuery事件 - toggle() 方法 转自w3school 实例 切换不同的背景色: $("p").toggle( function(){ $("body").cs...
  • qq_33545491
  • qq_33545491
  • 2017年01月11日 17:18
  • 605

第三方开源库:ByeBurger 实现标题栏和底部导航栏的出现与隐藏

简介一行代码实现标题栏和底部导航栏的出现与隐藏 github地址:https://github.com/githubwing/ByeBurger滚动时隐藏: 我们希望在用户的屏幕上显示尽可能多的内容...
  • ss1168805219
  • ss1168805219
  • 2016年11月24日 18:02
  • 1889
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery的toggle实现文字隐藏与显示
举报原因:
原因补充:

(最多只允许输入30个字)