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

时间：7年前阅读：4256

【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,我们将及时处理。

微信扫码关注

更新实时通知

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

网友评论