本文介绍: toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换hide() 方法隐藏被选元素show() 方法显示隐藏的被选元素。该方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 show(),如果一个元素是可见的,则运行 hide() – 这会造成一种隐藏和显示状态切换效果。;;

1、使用toggle()来隐藏和显示div元素

方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 show(),如果一个元素是可见的,则运行 hide() – 这会造成一种隐藏和显示状态切换效果

<!DOCTYPE html>
<html&gt;
	<head&gt;
		<meta charset="UTF-8"&gt;
		<script src="./js/jquery-3.6.0.min.js"&gt;</script&gt;
		<script&gt;
			$(document).ready(function() {
				$("button").click(function() {
					$("div").toggle();
				});
			});
		</script&gt;
		<style&gt;
			p,div,span {
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<p>p元素</p>
		<div>div元素</div>
		<span>span元素</span><br><br>
		<button>隐藏和显示div元素</button>

	</body>
</html>

在这里插入图片描述

2、使用fadeToggle()来隐藏和显示div元素

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换

如果元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。

如果元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function() {
		$("button").click(function() {
			$("div").fadeToggle();
		});
	});
</script>
<style>
	p,div,span {
		background-color: #DAA520;
	}
</style>

在这里插入图片描述

3、使用slideToggle() 来隐藏和显示div元素

slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换

slideUp() 方法以滑动方式隐藏被选元素。

slideDown() 方法以滑动方式显示被选元素。

该方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 slideDown(),如果一个元素是可见的,则运行 slideUp() – 这会造成一种隐藏和显示状态切换效果

<script src="./js/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function() {
		$("button").click(function() {
			$("div").slideToggle();
		});
	});
</script>

在这里插入图片描述

原文地址:https://blog.csdn.net/qq_38876189/article/details/132888370

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_6419.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注