Senario aplikasi biasa kaedah JQuery .toggle().
Senario aplikasi biasa dan contoh kod khusus kaedah JQuery .toggle()
Semasa proses pembangunan bahagian hadapan, kita sering menghadapi situasi di mana kita perlu mengawal paparan dan penyembunyian elemen. Kaedah .toggle() dalam JQuery ialah alat yang sangat mudah yang boleh menukar paparan dan keadaan tersembunyi elemen apabila mengklik padanya. Artikel ini akan memperkenalkan senario aplikasi biasa kaedah .toggle() dan memberikan contoh kod khusus.
- Paparan mudah dan kesan penyembunyian
Penggunaan kaedah togol() yang paling asas ialah untuk mengawal paparan dan menyembunyikan elemen lain apabila pengguna mengklik butang atau elemen. Contohnya, untuk menunjukkan atau menyembunyikan kotak teks apabila butang diklik:
<!DOCTYPE html>
<html>
<head>
<title>Toggle示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="toggleBtn">点击显示/隐藏</button>
<div id="toggleDiv" style="display:none;">这是要显示或隐藏的内容</div>
<script>
$("#toggleBtn").click(function() {
$("#toggleDiv").toggle();
});
</script>
</body>
</html> Dalam contoh di atas, mengklik butang menogol keadaan yang ditunjukkan dan tersembunyi bagi elemen #toggleDiv. #toggleDiv元素的显示和隐藏状态。
- 交替显示多个元素
除了简单的显示与隐藏效果，.toggle()方法还可以用于交替显示多个元素。例如，点击按钮依次显示不同的段落文本：
<!DOCTYPE html>
<html>
<head>
<title>多元素Toggle示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="toggleBtn">点击显示下一个段落</button>
<p class="togglePara" style="display:none;">第一个段落</p>
<p class="togglePara" style="display:none;">第二个段落</p>
<p class="togglePara" style="display:none;">第三个段落</p>
<script>
var currentIndex = 0;
$("#toggleBtn").click(function() {
$(".togglePara").eq(currentIndex).toggle();
currentIndex = (currentIndex + 1) % $(".togglePara").length;
$(".togglePara").eq(currentIndex).toggle();
});
</script>
</body>
</html>在上面的示例中，点击按钮会交替显示三个不同的段落文本。
- 切换CSS类
除了直接控制显示与隐藏外，.toggle()方法还可以用于切换元素的CSS类。例如，点击按钮可以切换元素的背景颜色：
<!DOCTYPE html>
<html>
<head>
<title>CSS类Toggle示例</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="toggleBtn">点击改变背景色</button>
<div id="toggleDiv">这是要改变背景色的内容</div>
<script>
$("#toggleBtn").click(function() {
$("#toggleDiv").toggleClass("highlight");
});
</script>
</body>
</html>在上面的示例中，点击按钮可以切换#toggleDiv
- Paparkan berbilang elemen secara berselang-seli🎜Selain paparan ringkas dan kesan penyembunyian, kaedah .toggle() juga boleh digunakan untuk memaparkan berbilang elemen secara berselang-seli. Contohnya, mengklik butang memaparkan perenggan teks yang berbeza dalam urutan: 🎜rrreee🎜 Dalam contoh di atas, mengklik butang secara bergilir-gilir memaparkan tiga perenggan teks yang berbeza. 🎜
- 🎜Menukar kelas CSS🎜🎜🎜Selain mengawal terus paparan dan menyembunyikan, kaedah .toggle() juga boleh digunakan untuk menukar kelas CSS sesuatu elemen. Contohnya, mengklik butang togol warna latar belakang elemen: 🎜rrreee🎜 Dalam contoh di atas, mengklik butang togol warna latar belakang elemen
#toggleDiv. 🎜🎜Melalui contoh kod sebenar di atas, kita dapat melihat fleksibiliti dan kepraktisan kaedah .toggle() dalam pembangunan bahagian hadapan. Sama ada paparan dan penyembunyian ringkas, paparan ganti berbilang elemen atau menukar kelas unsur CSS, kaedah .toggle() boleh mencapai pelbagai kesan dengan mudah. Saya berharap kandungan di atas berguna kepada semua orang, dan pembaca dialu-alukan untuk mencuba menggunakan pengetahuan ini dalam projek sebenar. 🎜Atas ialah kandungan terperinci Senario aplikasi biasa kaedah JQuery .toggle().. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk membuat asal Padam dari Skrin Utama dalam iPhone
Apr 17, 2024 pm 07:37 PM
Memadamkan sesuatu yang penting daripada skrin utama anda dan cuba mendapatkannya semula? Anda boleh meletakkan ikon apl kembali pada skrin dalam pelbagai cara. Kami telah membincangkan semua kaedah yang boleh anda ikuti dan meletakkan semula ikon aplikasi pada skrin utama Cara Buat Asal Alih Keluar dari Skrin Utama dalam iPhone Seperti yang kami nyatakan sebelum ini, terdapat beberapa cara untuk memulihkan perubahan ini pada iPhone. Kaedah 1 – Gantikan Ikon Apl dalam Pustaka Apl Anda boleh meletakkan ikon apl pada skrin utama anda terus daripada Pustaka Apl. Langkah 1 – Leret ke sisi untuk mencari semua apl dalam pustaka apl. Langkah 2 – Cari ikon apl yang anda padamkan sebelum ini. Langkah 3 – Hanya seret ikon apl dari pustaka utama ke lokasi yang betul pada skrin utama. Ini adalah gambar rajah aplikasi
Peranan dan aplikasi praktikal simbol anak panah dalam PHP
Mar 22, 2024 am 11:30 AM
Peranan dan aplikasi praktikal simbol anak panah dalam PHP Dalam PHP, simbol anak panah (->) biasanya digunakan untuk mengakses sifat dan kaedah objek. Objek adalah salah satu konsep asas pengaturcaraan berorientasikan objek (OOP) dalam PHP Dalam pembangunan sebenar, simbol anak panah memainkan peranan penting dalam mengendalikan objek. Artikel ini akan memperkenalkan peranan dan aplikasi praktikal simbol anak panah, dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Peranan simbol anak panah untuk mengakses sifat sesuatu objek Simbol anak panah boleh digunakan untuk mengakses sifat objek. Apabila kita instantiate sepasang
Daripada pemula hingga mahir: Terokai pelbagai senario aplikasi arahan tee Linux
Mar 20, 2024 am 10:00 AM
Perintah Linuxtee ialah alat baris arahan yang sangat berguna yang boleh menulis output ke fail atau menghantar output ke arahan lain tanpa menjejaskan output sedia ada. Dalam artikel ini, kami akan meneroka secara mendalam pelbagai senario aplikasi arahan Linuxtee, daripada kemasukan kepada kemahiran. 1. Penggunaan asas Mula-mula, mari kita lihat pada penggunaan asas arahan tee. Sintaks arahan tee adalah seperti berikut: tee[OPTION]...[FAIL]...Arahan ini akan membaca data daripada input standard dan menyimpan data ke
Terokai kelebihan dan senario aplikasi bahasa Go
Mar 27, 2024 pm 03:48 PM
Bahasa Go ialah bahasa pengaturcaraan sumber terbuka yang dibangunkan oleh Google dan pertama kali dikeluarkan pada tahun 2007. Ia direka bentuk untuk menjadi bahasa yang mudah, mudah dipelajari, cekap dan sangat bersesuaian, serta digemari oleh semakin ramai pembangun. Artikel ini akan meneroka kelebihan bahasa Go, memperkenalkan beberapa senario aplikasi yang sesuai untuk bahasa Go dan memberikan contoh kod khusus. Kelebihan: Konkurensi yang kuat: Bahasa Go mempunyai sokongan terbina dalam untuk benang-goroutine ringan, yang boleh melaksanakan pengaturcaraan serentak dengan mudah. Goroutin boleh dimulakan dengan menggunakan kata kunci go
Aplikasi luas Linux dalam bidang pengkomputeran awan
Mar 20, 2024 pm 04:51 PM
Aplikasi Linux yang luas dalam bidang pengkomputeran awan Dengan perkembangan berterusan dan mempopularkan teknologi pengkomputeran awan, Linux, sebagai sistem pengendalian sumber terbuka, memainkan peranan penting dalam bidang pengkomputeran awan. Disebabkan oleh kestabilan, keselamatan dan fleksibilitinya, sistem Linux digunakan secara meluas dalam pelbagai platform dan perkhidmatan pengkomputeran awan, menyediakan asas yang kukuh untuk pembangunan teknologi pengkomputeran awan. Artikel ini akan memperkenalkan rangkaian luas aplikasi Linux dalam bidang pengkomputeran awan dan memberikan contoh kod khusus. 1. Aplikasi teknologi virtualisasi Linux dalam platform pengkomputeran awan Teknologi Virtualisasi
Memahami cap masa MySQL: fungsi, ciri dan senario aplikasi
Mar 15, 2024 pm 04:36 PM
Cap waktu MySQL ialah jenis data yang sangat penting, yang boleh menyimpan tarikh, masa atau tarikh tambah masa. Dalam proses pembangunan sebenar, penggunaan cap masa yang rasional boleh meningkatkan kecekapan operasi pangkalan data dan memudahkan pertanyaan dan pengiraan berkaitan masa. Artikel ini akan membincangkan fungsi, ciri dan senario aplikasi cap waktu MySQL, dan menerangkannya dengan contoh kod khusus. 1. Fungsi dan ciri cap waktu MySQL Terdapat dua jenis cap masa dalam MySQL, satu ialah TIMESTAMP
Tutorial Apple tentang cara menutup aplikasi yang sedang berjalan
Mar 22, 2024 pm 10:00 PM
1. Mula-mula kita klik pada titik putih kecil. 2. Klik pada peranti. 3. Klik Lagi. 4. Klik Penukar Aplikasi. 5. Tutup sahaja latar belakang aplikasi.
Memahami mekanisme dan aplikasi pengurusan tindanan Golang
Mar 13, 2024 am 11:21 AM
Golang ialah bahasa pengaturcaraan sumber terbuka yang dibangunkan oleh Google yang mempunyai banyak ciri unik dalam pengaturcaraan serentak dan pengurusan memori. Antaranya, mekanisme pengurusan tindanan Golang merupakan ciri penting Artikel ini akan menumpukan pada mekanisme dan aplikasi pengurusan tindanan Golang, dan memberikan contoh kod khusus. 1. Pengurusan tindanan di Golang Di Golang, setiap goroutine mempunyai timbunan sendiri. Tindanan digunakan untuk menyimpan maklumat seperti parameter, pembolehubah setempat, dan alamat pemulangan fungsi bagi panggilan fungsi.
