Implementierung 'More/weniger' -Funktionalität mit reinem CSS

moderne Webentwicklung nutzt CSS häufig zum Erstellen dynamischer Elemente wie Sliders, Modal und Tooltips, wodurch JavaScript -Vertrauen minimiert wird. Dieser Artikel zeigt einen reinen CSS-Ansatz zur Implementierung von "More/weniger" -Funktionalität und erstellt sogar ein Beispiel für funktionale Akkordeon-Stil. Wir werden Techniken, potenzielle Probleme und Lösungen untersuchen. Überlegungen zur Zugänglichkeit sind hier weggelassen, sind jedoch ein entscheidender Aspekt für die zukünftige Verbesserung.

Schlüsselkonzepte:

Dieser CSS-Nur-"-Stempel" stützt sich auf den "Checkbox Hack" und den Geschwisterauswahlern. Die HTML -Struktur verwendet eine ungeordnete Liste. Das letzte Element enthält ein verstecktes Kontrollkästchen und sein Etikett. Eine verschachtelte, ungeordnete Liste hält den zu angezeigten/versteckten Inhalt. Die Eigenschaften max-height und transition CSS steuern die glatte Enthüllung/verbergen. Es können Browser -Inkonsistenzen existieren; Zum Beispiel kann sich das Cursorverhalten in den Browsern unterscheiden.

Essentielles CSS -Wissen:

Das Folgende verstehen ist von entscheidender Bedeutung:

<ul>

Allgemeines Geschwisterauswahl (~) : Wählt alle Geschwister nach einem angegebenen Element aus.

benachbarter Geschwisterauswahl Kontrollkästchen Hack

: Verwenden des geprüften Status eines Kontrollkästchens, um CSS -Änderungen auszulösen.

Eine Codepen -Demo (Link weggelassen, wie sie nicht im Eingang angegeben ist) liefert interaktive Beispiele für diese Techniken.

HTML -Struktur: </p>

Die grundlegende HTML -Struktur ist (vom Original vereinfacht):

</p> Styling des Kontrollkästchen -Containers:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="container">
    <input type="checkbox" id="showHide">
    <label for="showHide"></label>
    <ul>
      <li>Hidden Item 1</li>
      <li>Hidden Item 2</li>
    </ul>
  </li>
</ul>

Die Stile positionieren das Etikett und verbergen das Kontrollkästchen:

.container Der Inhalt des Etiketts ("mehr" oder "weniger") und die Animation werden mit Pseudo-Elementen (

und

.container {
  position: relative;
  height: auto;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

label {
  background: #e4e3df;
  display: block;
  width: 100%;
  height: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
}

) behandelt:

::before ::after versteckt zunächst das verschachtelte </p> :

label:before,
label:after {
  position: absolute;
}

/* ... (styles for :before and :after based on checked state) ... */

<ul> </p> mit CSS nachdenken:

[type="checkbox"] ~ ul {
  display: none;
}

Der geprüfte Status der Checkbox zeigt den versteckten Inhalt an: onclick

Die Position und der Inhalt des Etiketts werden bei Überprüfung angepasst:

[type="checkbox"]:checked ~ ul {
  display: block;
}

Eine Codepen -Demo (Link weggelassen) zeigt diesen grundlegenden Umschalteffekt.

[type="checkbox"]:checked + label {
  top: 100%;
}

/* ... (styles for :before and :after when checked) ... */

reibungslose Übergänge hinzufügen:

Verwenden Sie für reibungslosere Übergänge und :

max-height Der Übergang des Etiketts wird ebenfalls aktualisiert: transition

[type="checkbox"] ~ ul {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.44,.99,.48,1);
}

[type="checkbox"]:checked ~ ul {
  max-height: 300px; /* Or a calculated height */
}

Eine Codepen -Demo (Link weggelassen) zeigt den verbesserten, glatteren Übergang.

label {
  transition: top .45s cubic-bezier(.44,.99,.48,1);
}

Browser -Überlegungen:

Beachten Sie, dass das Cursorverhalten über Browser inkonsistent sein könnte (insbesondere bei Übergängen). </p> Schlussfolgerung:

Dieser Artikel zeigt einen leistungsstarken CSS-Ansatz, um die Funktionalität "mehr/weniger anzeigen". Während Einschränkungen (hauptsächlich Browser-Inkonsistenzen und die Notwendigkeit eines vorgegebenen max-height) vorhanden sind, bietet diese Technik eine saubere, javaScript-freie Lösung für viele Szenarien. Denken Sie daran, die Zugänglichkeit immer beim Erstellen interaktiver Komponenten zu priorisieren.

Das obige ist der detaillierte Inhalt vonImplementierung 'More/weniger' -Funktionalität mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!