Bagaimanakah Saya Boleh Mensimulasikan Kotak Semak Dalam Menu Pilihan Pilihan Menggunakan HTML, CSS dan JavaScript?

Menambahkan Kotak Pilihan pada Menu Pilihan Pilihan

Walaupun tidak mungkin untuk membenamkan kotak pilihan secara langsung dalam elemen pilihan, anda boleh mencapai kefungsian serupa menggunakan gabungan HTML, CSS dan JavaScript.

HTML Kod:

Buat bekas div dengan kelas "multiselect" yang akan menyimpan menu pilih dan kotak pilihan.

Dalam div "multiselect", buat dua div anak:

1. selectBox: Div ini akan mengandungi elemen pilih dan lutsinar tindanan yang meliputi pilihan pilihan apabila diklik.
2. kotak pilihan: Div ini akan memegang kotak pilihan individu dan pada mulanya akan disembunyikan.

Kod CSS :

Gunakan gaya berikut pada elemen:

• multiselect: Tetapkan lebar tetap untuk mengekang saiz menu.
• selectBox: Letakkan elemen pilih dan tindanan relatif kepada div.
• terlebihPilih: Gunakan kedudukan mutlak untuk menutup pilihan pilihan.
• kotak pilihan: Sembunyikan kotak pilihan pada mulanya menggunakan "paparan: tiada". Gayakan label supaya menyerupai pilihan terpilih.

Kod JavaScript:

Tambahkan pendengar acara pada div "selectBox" yang menogol keterlihatan "kotak pilihan " div apabila diklik.

Contoh Kod:

<form>
  <div>

Kod ini akan menyediakan menu Pilihan Pilih dengan kotak pilihan yang boleh dihidupkan dan dimatikan apabila pilihan pilihan diklik. Kotak pilihan akan meniru gelagat pilihan pilihan dengan memaparkan item yang dipilih dalam menu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mensimulasikan Kotak Semak Dalam Menu Pilihan Pilihan Menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!