Bagaimanakah cara saya membuat menu lungsur turun berbilang pilihan menggunakan kotak pilihan dalam HTML dan CSS?

Susan Sarandon
Lepaskan: 2024-11-11 08:37:03
asal
1061 orang telah melayarinya

How do I create a multiple-selection dropdown menu using checkboxes in HTML and CSS?

Cara Mengintegrasikan Kotak Pilihan ke dalam Menu Jatuh Turun

Mencipta senarai lungsur turun berbilang pilihan membolehkan pengguna memilih berbilang pilihan dengan mudah. Walaupun anda mungkin tergoda untuk menggunakan kotak semak ringkas di hadapan medan lungsur turun, kaedah ini memaparkan kotak semak untuk keseluruhan senarai dan bukannya untuk setiap pilihan. Untuk mencapai kefungsian yang diingini, ikuti langkah berikut:

Membuat Senarai Semak Jatuh Turun:

Pertimbangkan kod HTML dan CSS berikut untuk mencipta senarai semak lungsur turun mudah:

<div>
Salin selepas log masuk
.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}
Salin selepas log masuk

JavaScript boleh digunakan untuk mengawal keterlihatan senarai kotak pilihan.

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
};
Salin selepas log masuk

Keputusan:

Penyelesaian ini mencipta dropdown menu di mana anda boleh memilih berbilang pilihan dengan menandakan kotak pilihan. Elemen "anchor" bertindak sebagai butang untuk membuka dan menutup senarai kotak semak. Penggayaan boleh disesuaikan mengikut keperluan untuk dipadankan dengan reka bentuk tapak web anda.

Atas ialah kandungan terperinci Bagaimanakah cara saya membuat menu lungsur turun berbilang pilihan menggunakan kotak pilihan dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan