Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah kegunaan kaedah toggle() jquery?

Apakah kegunaan kaedah toggle() jquery?

青灯夜游
Lepaskan: 2023-01-28 15:28:29
asal
3921 orang telah melayarinya

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 (),...) ".

Apakah kegunaan kaedah toggle() jquery?

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)
Salin selepas log masuk
ParameterPenerangan
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>
Salin selepas log masuk

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

    "perlahan"

    "normal"

    "cepat"

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(),...)
Salin selepas log masuk
参数描述
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>
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan