Können zusammenklappbare Inhalte in HTML und CSS ohne jQuery erstellt werden?

Zusammenklappbare Inhalte in HTML und CSS ohne jQuery erstellen

Viele Designer sind bestrebt, zusammenklappbare Inhalte zu erstellen, wie sie im Theme von jQuery Mobile dargestellt werden. Es lohnt sich jedoch zu überlegen, ob für eine solche Funktionalität der Einsatz von jQuery notwendig ist. In diesem Artikel wird die Möglichkeit untersucht, dies mit reinem HTML und CSS zu erreichen, und es werden mehrere Beispiele bereitgestellt, um die Machbarkeit zu demonstrieren.

Mit HTML5s und Tags

HTML5 führt das und Tags, die speziell für diesen Zweck entwickelt wurden. Diese Tags erfordern kein zusätzliches Styling oder Skripting.

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

Verwendung von benutzerdefiniertem CSS-Styling

Für eine detailliertere Kontrolle über das Erscheinungsbild und das Verhalten von reduzierbaren Inhalten kann benutzerdefiniertes CSS dies tun implementiert werden.

details {
  border: 1px solid black;
  padding: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

details[open] summary {
  color: green;
}

details[open] p {
  display: block;
}

In diesem Beispiel werden die Ränder und der Abstand von zusammenklappbaren Abschnitten definiert, während sich der Cursor in a ändert Mauszeiger, wenn Sie mit der Maus über die Zusammenfassung fahren. Das Attribut „open“ wird verwendet, um die Farbe der Zusammenfassung zu ändern und den Inhalt anzuzeigen/auszublenden.

Zusätzliche Beispiele

Die folgenden Beispiele zeigen alternative Ansätze:

• Verwendung von Optionsfeldern: Das Erstellen eines separaten Optionsfelds für jeden reduzierbaren Abschnitt ermöglicht ein „traditionelleres“ Reduzieren und Erweitern Verhalten.
• Benutzerdefiniertes JavaScript ohne jQuery: Durch die Verwendung von Inline-JavaScript-Funktionen zum Umschalten der Sichtbarkeit reduzierbarer Abschnitte ist jQuery nicht mehr erforderlich, es werden aber dennoch externe Skripte hinzugefügt.
• Verwendung von Vue.js: Die Nutzung eines leichtgewichtigen JavaScript-Frameworks wie Vue.js bietet einen strukturierten Ansatz zur Verwaltung von Status und Reaktivität. Dadurch eignet es sich für komplexere zusammenklappbare Inhalte.
• CSS-Markisen mit flüssiger Typografie: Diese Technik verwendet reines CSS mit flüssiger Typografie, um den Zusammenfalt- und Erweiterungseffekt mit Markisen zu simulieren, die individuell angepasst werden können verschiedene Bildschirmgrößen.

Das obige ist der detaillierte Inhalt vonKönnen zusammenklappbare Inhalte in HTML und CSS ohne jQuery erstellt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!