Bagaimanakah cara saya membuat menu lungsur turun berbilang pilihan menggunakan kotak pilihan dalam HTML dan 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>
<pre class="brush:php;toolbar:false">.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;
}

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');
};

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.