Bagaimana untuk membuat menu drop-down muncul dan menyembunyikan dalam Javascript

Menu lungsur turun Javascript muncul dan menyembunyikan

Javascript ialah bahasa pengaturcaraan yang sangat popular yang boleh digunakan untuk melaksanakan banyak fungsi bahagian hadapan, seperti penampilan dan penyembunyian menu lungsur. Artikel ini akan memperkenalkan cara untuk melaksanakan penampilan dan penyembunyian menu lungsur dalam Javascript, serta beberapa petua dan langkah berjaga-jaga yang biasa.

Langkah satu: Cipta menu lungsur

Dalam HTML, mencipta menu lungsur memerlukan penggunaan teg pilih dan pilihan. Teg pilih digunakan untuk menentukan menu lungsur turun, dan teg pilihan digunakan untuk menentukan pilihan dalam menu lungsur turun. Berikut ialah contoh menu lungsur mudah:

<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Dalam contoh ini, kami mencipta menu lungsur dengan id "mySelect" dengan 4 pilihan: Volvo, Saab, Opel dan Audi.

Langkah 2: Tambah pengendali acara

Untuk merealisasikan penampilan dan penyembunyian menu lungsur turun, kita perlu menambah pengendali acara dalam Javascript. Kita boleh mencapai ini menggunakan acara onfocus dan onblur. Acara onfocus dicetuskan apabila menu lungsur turun mendapat fokus, manakala acara onblur dicetuskan apabila menu lungsur hilang fokus. Kami boleh menunjukkan menu lungsur turun dalam acara onfocus dan menyembunyikan menu lungsur dalam acara onblur. Berikut ialah contoh mudah:

var mySelect = document.getElementById("mySelect");

mySelect.onfocus = function() {
  this.size = 4;
};

mySelect.onblur = function() {
  this.size = 1;
};

Dalam contoh ini, kami mula-mula menggunakan kaedah document.getElementById() untuk mendapatkan elemen menu lungsur dengan id "mySelect". Kami kemudian menyediakan pengendali acara onfocus untuk memaparkan menu lungsur: Tetapkan sifat saiz menu lungsur kepada 4, yang akan menjadikan semua pilihan muncul pada skrin. Akhir sekali, kami menyediakan pengendali acara onblur untuk menyembunyikan dropdown: Tetapkan sifat saiz dropdown kepada 1, yang akan menyebabkan dropdown mengecil kepada saiz satu pilihan.

Langkah Tiga: Petua dan Pertimbangan Tambahan

1. Gunakan gaya CSS untuk menukar rupa dan gelagat menu lungsur turun. Sebagai contoh, anda boleh menggunakan CSS untuk menetapkan warna, fon, jidar, dsb. menu lungsur.
2. Menu lungsur turun juga boleh digunakan dalam acara tetikus. Sebagai contoh, anda boleh memaparkan semua pilihan apabila menu lungsur diklik atau diklik dua kali.
3. Sebelum menggunakan menu lungsur, pastikan menu tersebut mengandungi sekurang-kurangnya satu pilihan. Jika tidak, menu lungsur turun tidak akan berfungsi dengan betul.
4. Dalam sesetengah kes, pilihan pengelompokan mungkin perlu disertakan dalam menu lungsur turun. Ini boleh dicapai dengan menggunakan tag optgroup.
5. Jika menu lungsur turun anda perlu berinteraksi dengan data hujung belakang, anda boleh menggunakan Ajax untuk mencapainya. Ajax boleh menjadikan menu lungsur turun anda lebih dinamik dan interaktif.

Ringkasan

Ia adalah tugas yang agak mudah untuk melaksanakan penampilan dan penyembunyian menu lungsur turun dalam Javascript. Menu lungsur turun boleh ditunjukkan dan disembunyikan dengan mudah dengan menggunakan pengendali acara onfocus dan onblur. Pada masa yang sama, menggunakan gaya CSS dan teknik lain boleh menjadikan menu lungsur turun lebih berkuasa dan fleksibel. Sebagai pembangun bahagian hadapan, adalah sangat penting untuk memahami cara melaksanakan menu lungsur menggunakan Javascript. Harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk membuat menu drop-down muncul dan menyembunyikan dalam Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!