Rumah >hujung hadapan web >tutorial js >Demonstrasi dan analisis kaedah .toggle() JQuery
Demonstrasi dan analisis kaedah .toggle() JQuery
- 王林asal
- 2024-02-26 09:03:06696semak imbas
JQuery .toggle() contoh demonstrasi dan analisis
JQuery ialah perpustakaan JavaScript popular yang memudahkan penulisan kod JavaScript dan menyediakan banyak kaedah praktikal untuk mengendalikan elemen dan acara DOM. Salah satu kaedah yang biasa digunakan ialah kaedah .toggle(), yang bertukar antara menunjukkan dan menyembunyikan elemen. Artikel ini akan menunjukkan dan menganalisis penggunaan kaedah JQuery .toggle() melalui contoh kod tertentu.
1. Contoh kod
Andaikan kita mempunyai butang dan elemen perenggan Apabila butang diklik, paparan dan keadaan tersembunyi elemen perenggan boleh ditukar. Berikut ialah contoh kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery .toggle() 方法示例</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="toggleBtn">点击切换</button>
<p id="content" style="display:none;">这是要切换的内容</p>
<script>
$(document).ready(function(){
$("#toggleBtn").click(function(){
$("#content").toggle();
});
});
</script>
</body>
</html>2. Analisis Kod
Dalam contoh ini, kami mula-mula memperkenalkan perpustakaan JQuery, dan kemudian mencipta butang dan elemen perenggan. Id butang ialah toggleBtn, id elemen perenggan ialah kandungan dan elemen perenggan pada mulanya disembunyikan (paparan:tiada).
Kemudian dalam kod JavaScript, kaedah .ready() JQuery digunakan untuk memastikan halaman dimuatkan sebelum melaksanakan operasi. Apabila butang diklik, acara klik dipantau melalui kaedah .click() dan kemudian kaedah .toggle() dipanggil untuk menukar paparan dan keadaan tersembunyi elemen perenggan.
3. Kesan demonstrasi
Apabila kita membuka halaman ini dalam penyemak imbas dan mengklik butang, kita dapat melihat bahawa elemen perenggan bertukar antara menunjukkan dan bersembunyi. Dengan cara ini, kami telah melaksanakan contoh aplikasi mudah kaedah .toggle().
Melalui contoh ini, kita dapat melihat kesederhanaan dan kemudahan kaedah JQuery .toggle(), yang boleh memaparkan dan menyembunyikan elemen dengan mudah dan sesuai untuk penghasilan pelbagai kesan interaktif.
Ringkasan: Kaedah JQuery .toggle() ialah kaedah yang sangat praktikal yang boleh memudahkan paparan dan operasi menyembunyikan elemen dalam pembangunan bahagian hadapan. Dalam projek sebenar, kami boleh menggabungkan CSS dan kaedah JQuery lain seperti yang diperlukan untuk mencipta kesan interaktif yang lebih kaya. Saya berharap melalui pengenalan artikel ini, pembaca akan mempunyai pemahaman yang lebih mendalam tentang kaedah JQuery .toggle().
Atas ialah kandungan terperinci Demonstrasi dan analisis kaedah .toggle() JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!