Wie erstelle ich mithilfe von Kontrollkästchen in HTML und CSS ein Dropdown-Menü mit Mehrfachauswahl?

So integrieren Sie Kontrollkästchen in ein Dropdown-Menü

Durch das Erstellen einer Dropdown-Liste mit Mehrfachauswahl können Benutzer bequem mehrere Optionen auswählen. Auch wenn Sie versucht sein könnten, ein einfaches Kontrollkästchen vor dem Dropdown-Feld zu verwenden, zeigt diese Methode das Kontrollkästchen für die gesamte Liste statt für jede einzelne Option an. Um die gewünschte Funktionalität zu erreichen, befolgen Sie diese Schritte:

Erstellen einer Dropdown-Checkliste:

Berücksichtigen Sie den folgenden HTML- und CSS-Code, um eine einfache Dropdown-Checkliste zu erstellen:

<div>

.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 kann verwendet werden, um die Sichtbarkeit der Checkbox-Liste zu steuern.

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

Ergebnis:

Diese Lösung erstellt ein Dropdown Menü, in dem Sie durch Aktivieren der Kontrollkästchen mehrere Optionen auswählen können. Das „Anker“-Element fungiert als Schaltfläche zum Öffnen und Schließen der Checkbox-Liste. Das Styling kann je nach Bedarf an das Design Ihrer Website angepasst werden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von Kontrollkästchen in HTML und CSS ein Dropdown-Menü mit Mehrfachauswahl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!