Gunakan jQuery untuk menyedari klik untuk menukar untuk menunjukkan/menyembunyikan kotak drop-down menu hamburger

Tutorial ini memperincikan cara menggunakan jQuery dan JavaScript untuk mencapai interaksi UI yang biasa: Apabila mengklik butang menu hamburger, menukar paparan dan keadaan tersembunyi menu drop-down yang berkaitan. Dengan struktur HTML yang bersih dan beberapa baris kod jQuery, anda akan belajar bagaimana untuk mengawal keterlihatan elemen halaman, dengan itu mengoptimumkan pengalaman pengguna.

1. Memahami keperluan interaktif

Dalam reka bentuk web, menu hamburger sering digunakan dalam susun atur mudah alih atau responsif untuk menjimatkan ruang skrin. Apabila pengguna mengklik pada ikon menu hamburger, menu drop-down navigasi biasanya akan diperluas; Apabila diklik lagi, menu perlu ditarik balik. Ini jenis "klik untuk menukar" interaksi adalah kemahiran asas dalam pembangunan front-end.

2. Penyediaan Struktur HTML Asas

Untuk mencapai interaksi di atas, kami memerlukan struktur HTML yang jelas untuk menjadi tuan rumah butang menu hamburger dan menu drop-down yang sepadan. Berikut adalah contoh struktur yang disyorkan:

 <div class="dropdown">
  <button class="Hamburger-BTN"> Menu 
  <ul class="dropdown-menu">
    <li> Pilihan 1 </li>
    <li> Pilihan 2 </li>
    <li> Pilihan 3 </li>
  </ul>
</button>
</div>

• Div.Dropdown: Sebagai bekas untuk keseluruhan komponen drop-down.
• Button.Hamburger-BTN: Mencetuskan butang untuk menunjukkan/menyembunyikan menu drop-down.
• UL.Dropdown-Menu: Kandungan menu drop-down sebenar.

Nota: Dalam keadaan awal,. Untuk memastikan menu ditutup apabila halaman dimuatkan.

3. Gunakan jQuery untuk merealisasikan fungsi klik-ke-suis

JQuery menyediakan satu siri cara yang berkuasa untuk memudahkan operasi DOM dan pemprosesan acara. Di sini kami akan menggunakan pengikatan acara dan pemilih elemen untuk melaksanakan fungsi klik-ke-suis.

1. Memperkenalkan Perpustakaan JQuery

Pastikan perpustakaan jQuery telah diperkenalkan sebelum akhir atau tag fail HTML anda. Anda boleh memuatkan dari CDN, sebagai contoh:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>

2. Tulis kod JavaScript/JQuery

Logik teras adalah untuk mendengar peristiwa klik butang hamburger dan bertukar-tukar penglihatan menu lungsur apabila acara itu dicetuskan.

 $ (dokumen) .ready (fungsi () {
  // Apabila dokumen itu dimuatkan sepenuhnya dan dihuraikan, laksanakan $ ('. Hamburger-btn'). Klik (fungsi () {
    // Mengikat acara klik ke semua elemen dengan nama kelas 'hamburger-btn' // 'ini' merujuk kepada yang diklik sekarang '.hamburger-btn' element // .siblings ('.
    $ (ini) .siblings ('. Dropdown-menu'). Togol ();
  });
});

Penjelasan kod:

• $ (dokumen) .ready (fungsi () {...});: Ini adalah corak idiomatik jQuery, memastikan bahawa DOM (model objek dokumen) dimuatkan sepenuhnya dan dihuraikan sebelum melaksanakan kod dalaman, menghalang percubaan untuk beroperasi pada elemen apabila ia tidak wujud.
• $ ('. Hamburger-btn'). Klik (fungsi () {...});: Barisan kod ini memilih semua elemen dengan kelas Hamburger-BTN dan mengikat pengendali acara klik kepada mereka. Apabila mana -mana elemen ini diklik, fungsi dalam kurungan dilaksanakan.
• $ (ini): Di dalam fungsi pengendali acara, kata kunci ini merujuk kepada elemen DOM yang mencetuskan peristiwa semasa. $ (ini) membungkusnya ke dalam objek jQuery supaya kita boleh menggunakan kaedah jQuery.
• .SIBLINGS ('. Dropdown-menu'): Ini adalah kaedah jQuery yang sangat praktikal. Ia akan mencari semua unsur saudara objek jQuery semasa (iaitu, yang diklik .Hamburger-BTN) dan menapis unsur-unsur dengan kelas menu jatuh. Ini memastikan bahawa kami hanya mengendalikan menu drop-down yang berkaitan secara langsung dengan butang yang diklik.
• .toggle (): Ini adalah kaedah animasi jQuery untuk menukar penglihatan elemen. Jika elemen kini dapat dilihat, ia menyembunyikannya; Jika elemen kini tersembunyi, ia memaparkannya. Secara lalai, ia menggunakan animasi yang lancar dalam/memudar.

4. Langkah berjaga -jaga dan amalan terbaik

1. CSS Status Awal: Pastikan CSS Stylesheet anda menetapkan sifat paparan awal..

    .dropdown-menu {
     Paparan: Tiada; /* menyembunyikan awal*/
     Senarai gaya: Tiada;
     Padding: 0;
     Margin: 0;
     Sempadan: 1px pepejal #ccc;
     latar belakang warna: #f9f9f9;
     Kedudukan: Mutlak; /* Jika kesan terapung diperlukan*/
     Z-indeks: 1000;
   }

2. Versi JQuery: Pastikan versi jQuery yang anda gunakan adalah serasi dengan projek anda. Kod di atas berfungsi dengan baik dalam versi jquery moden.
3. Pertimbangan Prestasi: Untuk aplikasi besar atau kompleks, anda boleh mempertimbangkan menggunakan perwakilan acara ($ (dokumen) .on ('klik', '.hamburger-btn', fungsi () {...}); untuk meningkatkan prestasi, terutamanya apabila menambah atau mengeluarkan butang secara dinamik.
4. Kebolehcapaian: Untuk meningkatkan kebolehcapaian, pertimbangkan untuk menambah atribut ARIA (seperti ARIA-Expanded) untuk menunjukkan status yang diperluas menu dan pastikan pengguna keyboard dapat mengaktifkan menu melalui Navigasi Kunci Tab dan Masukkan Kekunci.
5. Alternatif: Sebagai tambahan kepada .toggle (), anda juga boleh menggunakan .addclass () dan .removeClass () untuk menukar kelas CSS yang mengawal paparan/menyembunyikan (seperti .show atau .hide), yang memberikan fleksibiliti yang lebih besar dalam kawalan gaya.

5. Ringkasan

Melalui tutorial ini, anda telah belajar bagaimana menggunakan jQuery untuk melaksanakan dengan mudah dan cekap melaksanakan paparan klik-ke-suis dan menyembunyikan fungsi kotak drop-down menu hamburger. Inti adalah untuk mengenal pasti unsur -unsur HTML dengan betul dan menggunakan kaedah pengikatan peristiwa jQuery dan kaedah operasi DOM (seperti .siblings () dan .toggle ()) untuk mengawal keterlihatan elemen. Menguasai corak interaksi asas ini adalah penting untuk membina antara muka web responsif dan mesra pengguna.

Atas ialah kandungan terperinci Gunakan jQuery untuk menyedari klik untuk menukar untuk menunjukkan/menyembunyikan kotak drop-down menu hamburger. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!