Wie kann ich die Sichtbarkeit mehrerer Divs beim Klicken nur mit CSS umschalten?

Div-Sichtbarkeit beim Klicken mit CSS steuern

Problem:

Ein Benutzer möchte die Sichtbarkeit mehrerer Divs einschalten Klicken Sie ausschließlich mit CSS und ermöglichen Sie so die Barrierefreiheit ohne JavaScript.

Lösung:

Verwenden Sie den „Checkbox-Hack“:

1. Erstellen Sie ein verstecktes Kontrollkästchen: Definieren a Element und setzen Sie seine Anzeige mithilfe von CSS auf „Keine“.
2. Verknüpfen Sie ein Klickereignis mit dem Kontrollkästchen:Wenn auf die Menüoption geklickt wird, schalten Sie das aktivierte Attribut des Kontrollkästchens um.
3. Divs basierend auf dem Status des Kontrollkästchens formatieren: Verwenden Sie den Pseudoselektor :checked in CSS, um je nach Status unterschiedliche Stile auf Divs anzuwenden ob das Kontrollkästchen aktiviert ist oder nicht. Dies wirkt sich auf ihre Sichtbarkeit, ihr Verblassen oder ihr Gleitverhalten aus.

Codebeispiel:

<input type="checkbox">

#myCheckbox:checked ~ #myDiv {
  display: block;
  animation: slide-in 0.5s ease-in-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

Vorteile:

• Barrierefreiheit: Funktioniert ohne JavaScript aktiviert.
• Steuerung: Passen Sie die CSS-Animationen an, um das Schiebe-/Fade-Verhalten anzupassen.
• Einfachheit: Erfordert nur minimalen CSS-Code und kein JavaScript.

Das obige ist der detaillierte Inhalt vonWie kann ich die Sichtbarkeit mehrerer Divs beim Klicken nur mit CSS umschalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!