Das Einrichten eines Verzeichnisses, das nach dem Anklicken eines Ankerlinks in Elementor geschlossen wird (z. B. ein eingeklapptes Menü oder ein Navigationsmenü), kann mit Hilfe eines benutzerdefinierten Codes erfolgen. Hier sind die genauen Schritte:

Schritt 1: Individuelle Beitragsvorlage bearbeiten

1. sich anmeldenWordPress Dashboard.
2. Zu Elementor navigierenVorlage > Gespeicherte Vorlagen.

3. Suchen Sie Ihre individuelle Beitragsvorlage und klicken Sie auf "Mit Elementor bearbeiten".

Schritt 2: Hinzufügen von HTML-Elementen

1. Suchen Sie im Vorlageneditor den Abschnitt, an dem Sie den Code einfügen müssen, in der Regel am Ende der Seite.
2. Ziehen Sie ein HTML-Element per Drag & Drop in die Vorlage.

Schritt 3: Einfügen des benutzerdefinierten JavaScript-Codes

Fügen Sie in das HTML-Element den folgenden JavaScript-Code ein:

<script
document.addEventListener('DOMContentLoaded', function() {
    var menuItems = document.querySelectorAll('.elementor-table-of-contents a'); // ersetzen Sie .elementor-table-of-contents durch Ihre Katalogklasse

    menuItems.forEach(function(menuItem) {
        menuItem.addEventListener('click', function() {
            var menuToggle = document.querySelector('.elementor-menu-toggle'); // Ersetzen Sie .elementor-menu-toggle durch Ihre Klasse für die Schaltfläche zum Umschalten des Menüs

            if (menuToggle) {
                menuToggle.click(); // Schließen des Menüs auslösen
            }
        }).
    });
}).
</script

Erklärung

1. Abgleich von Klassennamen::
   • .elementor-Inhaltstabelle der Klassenname des Verzeichnisses ist, müssen Sie ihn durch den tatsächlichen Klassennamen des Verzeichnisses ersetzen.
   • .elementor-menu-umschalter der Klassenname der Menüumschalttaste ist, müssen Sie ihn durch den tatsächlichen Klassennamen der Menüumschalttaste ersetzen.
   Sie können den tatsächlich verwendeten Klassennamen über die Entwicklerwerkzeuge Ihres Browsers (F12) überprüfen.
2. Ereignis-Listener::
   • document.addEventListener('DOMContentLoaded', function() { ... }); Stellen Sie sicher, dass der Code ausgeführt wird, nachdem die Seite vollständig geladen ist.
   • menuItem.addEventListener('click', function() { ... }); Fügen Sie für jeden Katalog-Link einen Click-Event-Listener hinzu.
3. Auslösermenü aus::
   • menuToggle.click(); Simuliert das Klicken auf die Schaltfläche zum Umschalten des Menüs, wodurch das Menü geschlossen wird.

Schritt 4: Speichern und veröffentlichen

1. Benennen Sie Ihren benutzerdefinierten Code (z. B. "Anchor Links Close Directory").
2. Wählen Sie als Geltungsbereich des Codes "Gesamte Website".
3. Speichern und veröffentlichen Sie den Code.

Zusammenfassung:

Durch Hinzufügen von benutzerdefiniertem JavaScript-Code zu einer einzelnen Beitragsvorlage können Sie ein automatisches Schließen des Verzeichnisses implementieren, nachdem Elementor auf einen Ankerlink geklickt hat. Die wichtigsten Schritte sind die Bearbeitung der Vorlage, das Hinzufügen von HTML-Elementen und das Einfügen des Codes. Achten Sie darauf, dass der Klassenname korrekt ist, damit die Funktion ordnungsgemäß funktioniert. Dieses Setup optimiert nicht nur die Verwendung des Navigationsmenüs, sondern verbessert auch die allgemeine Benutzererfahrung und Interaktivität der Website. Die Wahl dieser Methode trägt dazu bei, dass die Website professionell und funktionell bleibt.