In diesem Blog werde ich ein Akkordeon erstellen, indem ich natives Javascript verwende. Es wird keine Bibliothek wie jQuery benötigt. JQueryUI hat eine eingebaute Akkordeon-Komponente, die großartig zu verwenden ist. Aber als verantwortungsvoller Entwickler sollten wir auch wissen, wie man ein Akkordeon mit reinem Javascript erstellt. Wenn Sie nicht wissen, was Akkordeon ist dann schauen jquery ein hier.
Lassen Sie uns brechen die Komponente in kleinere Schritte.
- Akkordeon enthält eine Liste von panels.
- Jedes Panel hat zwei Komponenten, Kopf & Körper.
- Die Kopfkomponente aller Bereiche ist immer sichtbar.
- Ein Bereich kann erweitert oder reduziert werden.
- Wenn ein Bereich erweitert wird, wird seine Körperkomponente sichtbar.
- Es kann immer nur ein Bereich aufgeklappt werden.
- Wenn ein anderer Bereich aufgeklappt wird, wird die Körperkomponente des letzten Bereichs ausgeblendet.
Lassen Sie uns die Komponente in kleinen Schritten aufbauen.
Schritt 1: – Entwerfen Sie ein einfaches HTML
Lassen Sie uns ein einfaches HTML erstellen, das eine Liste von Feldern mit einer Kopfzeile & und einem Körper erstellt.
Das obige HTML enthält eine Liste von Feldern. Jedes Panel hat einen Header und einen Body. Derzeit ist alles sichtbar.
Schritt 2: – Definieren Sie einige CSS, um die Sichtbarkeit zu handhaben
Lassen Sie uns zwei CSS-Klassen erstellen, um die Sichtbarkeit des Körpers zu definieren.
Standardmäßig wollen wir den gesamten Körper des Panels je nach Anforderung ausblenden. Jetzt müssen wir nur das erweiterte Element auf einmal anzeigen. Wir fügen die Klasse active in das div des Panels ein, um den Körper sichtbar zu machen.
Schritt 3: CSS im HTML verwenden
Nach dem Hinzufügen von CSS in unser HTML wird der Code wie folgt aussehen
Jetzt ist der Körper des Panels mit Ausnahme des ersten Elements ausgeblendet. Wir haben unsere grundlegende Akkordeon-Komponente erstellt. Wir müssen etwas Javascript verwenden, um es voll funktionsfähig zu machen.
Schritt 4: – Hinzufügen von Klick-Ereignissen
Wir werden Klick-Ereignisse zu jedem Panel hinzufügen, die die Sichtbarkeit des Panels ändern werden.
JS Fiddle link here
initAccordion function is defined to initialize the accordion component. Sie setzt ein Klick-Ereignis auf jedes Panel. Wenn ein Panel angeklickt wird, entfernt sie die aktive Klasse aus dem aktuellen Panel und fügt sie dem neuen Panel hinzu. Standardmäßig wird das erste Feld als aktiv markiert. Wir können jedes Panel standardmäßig aktiv machen, indem wir das Panel-Element an die showPanel-Funktion übergeben.
Wir haben unser Akkordeon erfolgreich erstellt. Dies ist nur ein sehr grundlegendes Modell des Akkordeons, aber es deckt die Hauptfunktionalität ab.
Wir können es durch Hinzufügen von netten CSS-Styles, Animationen und Icons schicker machen. Außerdem können wir es leistungsorientierter machen, indem wir die Ereignisdelegation & implementieren, die aktuelle aktive Elemente zwischenspeichert. Siehe mein Blog über Ereignisse, um mehr über Ereignisse im Detail zu erfahren.