24
2018
12

jquery toggle()切换显示或隐藏匹配元素

【toggle()】

  show()与hide()是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。比如显示的元素,那么就要调用hide,反之亦然。 对于这样的操作行为,jQuery提供了一个便捷方法toggle()用于切换显示或隐藏匹配元素

  如果没有参数,toggle()方法是最简单的方法来切换一个元素可见性

  通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。如果元素是最初显示,它会被隐藏,如果隐藏的,它会显示出来。display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>    
		<script type="text/javascript">    
			$(function(){    
				$('#dd').click(function(){      
//					toggle()用于切换显示或隐藏匹配元素
					$('#tt').toggle();
				})    
			})    
		</script>    
	</head>    
	<body>    
		<input type="button" name="dd" id="dd" value="点击我呀" />    
		<br /><br />    
		<img src="https://www.qiquanji.com/data/img/dmj/201905041556934410176698.jpg" alt="" id="tt"/>      
		<h1>我们学习一下,点上面的按钮实现显隐功能</h1>    
	</body>    
</html>

原文链接:https://www.qiquanji.com/post/7041.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。