jqueryで表示・非表示の切り替えを実現する方法-フロントエンドQ&A-php.cn

jqueryで表示・非表示の切り替えを実現する方法

青灯夜游

リリース： 2022-04-21 17:16:32

オリジナル

2843 人が閲覧しました

交換メソッド: 1. 「element object.toggle()」を使用して、要素が表示されているときに要素を非表示にし、非表示になっているときに要素を表示します。 2. 「element object.slideToggle()」を使用します。 , 要素が表示されている場合は要素が非表示になり、要素が非表示の場合は要素が表示されます; 3. 「element object.fadeToggle()」を使用します。

jqueryで表示・非表示の切り替えを実現する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery には、表示と非表示の切り替えを実装するための 3 つのメソッドがあります。

toggle() メソッド
slideToggle() メソッド
fadeToggle() メソッド

#1、toggle() メソッド

toggle() メソッドは、選択した要素の Hide() と show() を切り替えます。

このメソッドは、選択した要素の表示ステータスをチェックします。要素が非表示の場合は show() が実行され、要素が表示されている場合は Hide() が実行されます。これにより、トグル効果が作成されます。

注: 非表示の要素は完全には表示されません (ページのレイアウトには影響しません)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").toggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 hide() 和 show()</button>

	</body>
</html>

ログイン後にコピー

jqueryで表示・非表示の切り替えを実現する方法

2. slideToggle() メソッド

slideToggle() メソッドは、選択した要素に対して slideUp() と slideDown() を実行します。 ) を切り替えます。

このメソッドは、選択した要素の表示ステータスをチェックします。要素が非表示の場合は slideDown() が実行され、要素が表示されている場合は slideUp() が実行されます。これによりトグル効果が作成されます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 slideUp() 和 slideDown()</button>

	</body>
</html>

ログイン後にコピー

jqueryで表示・非表示の切り替えを実現する方法

3. fadeToggle() メソッド

fadeToggle() メソッドは、fadeIn() メソッドと fadeOut() メソッドを切り替えます。

要素がフェードアウトしている場合、fadeToggle() はフェードイン効果を使用して要素を表示します。
要素がフェードインしている場合、fadeToggle() はフェードアウト効果を使用して要素を表示します。

注: 非表示の要素は完全には表示されません (ページのレイアウトには影響しません)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#div1").fadeToggle();
					$("#div2").fadeToggle("slow");
					$("#div3").fadeToggle(3000);
				});
			});
		</script>
	</head>
	<body>

		<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
		<button>点击淡入/淡出</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
		<br>
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
		<br>
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

	</body>
</html>

ログイン後にコピー

jqueryで表示・非表示の切り替えを実現する方法