Einfaches Akkordeon ohne JavaScript

Dieser Artikel wurde ursprünglich auf Rails Designer veröffentlicht

Es ist kein Geheimnis, dass HTML und CSS im Laufe der Jahre viel besser geworden sind. Und obwohl es mir Spaß gemacht hat, JavaScript zu schreiben, tue ich es, wann immer ich kann.

Eines dieser Dinge, die kein JavaScript benötigen, ist das typische Akkordeon. Es handelt sich um die Art von Komponente, die mit JS-Frameworks wie Vue, Alpine und Stimulus einfach zu erstellen ist, aber für die einfachste Version benötigen Sie keine davon. Und damit sie gut aussehen, brauchen Sie nur CSS.

Dieses Beispiel ist das, was ich anstrebe. Sie sehen, es muss nicht der typische FAQ-Listen-Stil sein. Die Verwendung für Abschnitte wie diesen funktioniert auch einwandfrei.

Dieser Artikel stammt von:

• die Grundlagen;
• um visuelles Interesse zu wecken;
• zu coolen progressiven Verbesserungen bei Verwendung einer wenig bekannten erweiterten Stimulus-Funktion.

Die Grundlagen

Die einfachste Version sieht so aus:

<details>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details>
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

Und so sieht es aus:

Sehen Sie sich den Originalartikel an, um Live-Beispiele zu sehen. ?

Es ist nicht das Schönste, aber es funktioniert!

Details/Zusammenfassungsattribute

Es gibt ein paar interessante Tricks, die das Detail-/Zusammenfassungselement im Ärmel hat.

• open-Attribut; Sie können dieses Attribut so einstellen, dass es standardmäßig ein oder mehrere Elemente öffnet (es wird auch für das folgende CSS verwendet);
• Name-Attribut hinzufügen; Dadurch kann nur ein details-Element geöffnet sein. Wenn Sie eines öffnen, werden alle anderen automatisch geschlossen.

<details name="more" open>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details name="more">
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

Schau es dir an:

Sehen Sie sich den Originalartikel an, um Live-Beispiele zu sehen. ?

Mehr visuelles Interesse hinzufügen

Die Standardeinstellungen sehen nicht besonders schön aus, also fügen wir etwas CSS hinzu, um die Dinge besser an Ihre App anzupassen. Die wichtigsten Teile sind:

• [&::-webkit-details-marker]:hidden; Dadurch wird der Standard-Chevron ausgeblendet;
• group-open/details:rotate-180; Dadurch wird das benutzerdefinierte Chevron-Symbol basierend auf seinem Status gedreht.

Die Vollversion mit Tailwind CSS würde so aussehen:

<details>



<p>This is how it looks:</p>

<blockquote>
<p>View the original article to live examples. ?</p>
</blockquote>

<h2>
  
  
  Progressive enhancements
</h2>

<p>A <strong>toggle</strong> event is dispatched on the <strong>details</strong>-element whenever it state changes. So you could listen for it like this:<br>
</p>

<pre class="brush:php;toolbar:false">details.addEventListener("toggle", (event) => {
  if (details.open) {
    // Do something
  } else {
    // Do something else
  }
});

Wofür können Sie das verwenden? Speichern Sie beispielsweise den Status des details-Elements im localStorage des Browsers, damit dieser dauerhaft erhalten bleibt. Schauen wir es uns mit einem kleinen Stimulus-Controller an:

// app/javascript/controllers/accordion_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.open = localStorage.getItem(this.element.id) === "open";

    this.#attachEventListeners();
  }

  // private

  #attachEventListeners() {
    this.element.addEventListener("toggle", (event) => {
      if (this.element.open) {
        localStorage.setItem(this.element.id, "open");
      } else {
        localStorage.removeItem(this.element.id);
      }
    });
  }
}

Benötigen Sie ein weiteres Beispiel? Ein typischer FAQ-Listenstil ist auf der Preisseite zu sehen.

So einfach ist es, ein Akkordeon mit einfachem HTML hinzuzufügen. Sie könnten ganz einfach anfangen, dann mit CSS etwas visuelles Interesse hinzufügen und das Ganze mit einigen progressiven Verbesserungen mit einem einfachen Stimulus-Controller abrunden.

Das obige ist der detaillierte Inhalt vonEinfaches Akkordeon ohne JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!