Скачать или смотреть Wie man mit jQuery das Suchfeld schließt, wenn man außerhalb darauf klickt

Erfahren Sie, wie Sie in Ihrer Webanwendung ein Suchfeld effektiv schließen, wenn Nutzer außerhalb darauf klicken, und verbessern Sie die Benutzererfahrung mit jQuery.
---
Dieses Video basiert auf der Frage https://stackoverflow.com/q/62233078/ gestellt von dem Nutzer 'JMKelley' ( https://stackoverflow.com/u/3082823/ ) sowie auf der Antwort https://stackoverflow.com/a/62233304/ bereitgestellt von dem Nutzer 'ROOT' ( https://stackoverflow.com/u/896358/ ) auf der Website 'Stack Overflow'. Vielen Dank an diese großartigen Nutzer und die Stackexchange-Community für ihre Beiträge.

Besuchen Sie diese Links, um den Originalinhalt und weitere Details zu sehen, z. B. alternative Lösungen, aktuelle Entwicklungen zum Thema, Kommentare, Versionsverlauf usw. Der ursprüngliche Titel der Frage lautete beispielsweise: Close Search box when clicking anywhere else

Außerdem steht der Inhalt (außer Musik) unter der Lizenz CC BY-SA https://meta.stackexchange.com/help/l...
Der ursprüngliche Fragenbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ), und der ursprüngliche Antwortbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ).

Falls Ihnen irgendetwas auffällt oder Unstimmigkeiten bestehen, schreiben Sie mir bitte an vlogize [AT] gmail [DOT] com.
---
Einführung

Sind Sie jemals auf die Situation gestoßen, dass Ihr Suchfeld geöffnet bleibt, selbst wenn Nutzer anderswo auf der Seite klicken? Das kann zu einer unübersichtlichen Oberfläche und verwirrenden Benutzererfahrung führen. Glücklicherweise gibt es eine elegante Lösung mit jQuery, die es ermöglicht, das Suchfeld zu schließen, sobald ein Nutzer außerhalb darauf klickt. In diesem Blogbeitrag zeigen wir Ihnen eine einfache Methode, um diese Funktionalität zu realisieren.

Das Problem

Stellen Sie sich vor, Sie haben auf Ihrer Webseite eine Suchleiste, die sich beim Klicken auf ein Suchsymbol öffnet. Das Suchfeld bleibt jedoch geöffnet, auch wenn der Nutzer auf andere Bereiche der Webseite klickt. Dies kann zu Frustration führen, da Nutzer erwarten, dass das Suchfeld automatisch geschlossen wird, wenn sie mit anderen Elementen auf der Seite interagieren.

Die Lösung

Schritt 1: jQuery einbinden

Um Klickereignisse zu verarbeiten, können wir jQuery verwenden, das eine einfache Manipulation des DOM (Document Object Model) bietet. Der erste Schritt ist sicherzustellen, dass jQuery in Ihrem Projekt eingebunden ist. Falls nicht, fügen Sie folgende Zeile in Ihr HTML-Dokument ein:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Schritt 2: HTML-Struktur

Der nächste Schritt ist das Erstellen des HTML-Teils Ihres Suchfelds. Hier ist eine einfache Grundstruktur:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Schritt 3: jQuery-Funktionalität hinzufügen

Jetzt fügen wir den jQuery-Code hinzu, um die Klick-Ereignisse zu verwalten. So geht's:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Erklärung des Codes

Ereignisbehandlung: Mit click-Events steuern wir, was passiert, wenn Nutzer auf das Suchsymbol und den Dokumentenkörper klicken.

Suchfeld umschalten: Beim Klicken auf das Suchsymbol (Trigger) wird die Sichtbarkeit des Suchfeldes durch Hinzufügen oder Entfernen der Klasse open geändert.

Schließen beim Klick außerhalb: Wenn Nutzer irgendwo anders klicken (auch im Body), prüfen wir, ob das geklickte Ziel nicht das Suchfeld ist. Falls nicht, wird das Suchfeld geschlossen.

Schritt 4: CSS für das Styling

Damit Ihr Suchfeld ansprechend aussieht, können Sie folgendes CSS hinzufügen:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Fazit

Mit dieser Methode schaffen Sie eine saubere und benutzerfreundliche Erfahrung auf Ihrer Webseite, indem Sie sicherstellen, dass das Suchfeld geschlossen wird, wenn außerhalb darauf geklickt wird. Die Integration dieser Funktionalität mit jQuery verbessert die Interaktivität Ihrer Webanwendung. Wenn Sie Ihre Weboberfläche weiter verbessern möchten, experimentieren Sie gerne mit verschiedenen Designs und Verhaltensweisen!

Mit diesen Schritten wird das Verwalten der Sichtbarkeit Ihres Suchfelds zum Kinderspiel und Ihre Benutzeroberfläche bleibt übersichtlich und benutzerfreundlich. Viel Spaß beim Coden!