Rumah > Artikel > hujung hadapan web > Apakah kegunaan kaedah toggle() jquery?

Apakah kegunaan kaedah toggle() jquery?

青灯夜游asal: 2023-01-28 15:28:293904semak imbas

kaedah toggle() boleh digunakan untuk menukar kaedah hide() dan show() bagi elemen yang dipilih, dengan itu mengawal paparan dan penyembunyian elemen Sintaksnya ialah "$(selector).toggle(. speed,callback)"; juga Boleh digunakan untuk mengikat dua atau lebih fungsi pengendali acara untuk bertindak balas kepada acara klik elemen yang dipilih secara bergilir-gilir. Sintaks "$(selector).toggle(function1(), function2(), functionN (),...) ".

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.

Dalam jquery, kaedah toggle() mempunyai beberapa fungsi:

Kawal paparan dan penyembunyian elemen
Mengikat Tentukan dua atau lebih fungsi pengendali acara klik

kaedah togol() boleh digunakan untuk menukar kaedah hide() dan show() bagi elemen yang dipilih

Kaedah ini menyemak status yang boleh dilihat bagi elemen yang dipilih. Jika elemen tersembunyi, show() dijalankan, jika elemen kelihatan, hide() dijalankan - ini mencipta kesan togol.

$(selector).toggle(speed,callback)

Parameter

Penerangan

kelajuan

参数

描述

speed

可选。规定 hide/show 效果的速度。默认是 "0"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

callback

可选。当 toggle() 方法完成时执行的函数。

Pilihan. Menentukan kelajuan menyembunyikan/menunjukkan kesan. Lalai ialah "0".

Nilai yang mungkin:

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

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

	</body>
</html>

milisaat (cth. 1500) Apakah kegunaan kaedah toggle() jquery?

"normal"

panggil balik

Ya pilih . Fungsi dilaksanakan apabila kaedah toggle() selesai.

Nota: Elemen tersembunyi tidak akan dipaparkan sepenuhnya (tidak lagi menjejaskan reka letak halaman).

$(selector).toggle(function1(),function2(),functionN(),...)

参数	描述
function1()	必需。规定当元素在每偶数次被点击时要运行的函数。
function2()	必需。规定当元素在每奇数次被点击时要运行的函数。
functionN(),...	可选。规定需要切换的其他函数。

kaedah toggle() juga boleh digunakan untuk bertukar antara fungsi tersuai

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");},
    function(){
    $("body").css("background-color","pink");}
  );
});
</script>
</head>
<body>
<button>请点击这里，来切换不同的背景颜色</button>
</body>
</html>

Apakah kegunaan kaedah toggle() jquery? kaedah toggle() boleh digunakan Ikat dua atau lebih fungsi pengendali acara untuk bertindak balas terhadap peristiwa klik elemen yang dipilih secara bergilir-gilir.

Togol antara dua atau lebih fungsi apabila elemen yang ditentukan diklik. Jika lebih daripada dua fungsi ditentukan, kaedah toggle() akan menogol semua fungsi. Sebagai contoh, jika terdapat tiga fungsi, klik pertama akan memanggil fungsi pertama, klik kedua akan memanggil fungsi kedua, dan klik ketiga akan memanggil fungsi ketiga. Klik keempat memanggil fungsi pertama sekali lagi, dan seterusnya. Sintaks:

Contoh: [Pembelajaran yang disyorkan: tutorial video jQuery , video bahagian hadapan web]

Atas ialah kandungan terperinci Apakah kegunaan kaedah toggle() jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melaksanakan css untuk hanya memaparkan garis bawah barisArtikel seterusnya：Bagaimana untuk melaksanakan css untuk hanya memaparkan garis bawah baris

Artikel berkaitan

Lihat lagi