jQuery: Accordion-Effekt oder: das Eltern-Element aus dem Kind ansteuern

Das JavaScript-Framework jQuery wird mehr und mehr zu meiner Standard-Bibliothek auf Webseiten. Hat man die Grundlagen einmal verstanden, ist die Verwendung fast intuitiv und nur unter Einsatz der API-Referenz zu erledigen.So hatte ich in einem aktuellen Projekt die Anforderung, aus einem Kind-Element im DOM das Eltern-Element anzusteuern und zu einer Handlung zu zwingen. Ich habe lange gesucht, bin aber schliesslich auf eine sehr einfache Lösung gestossen. Der Trick ist, die Möglichkeit der Aneinanderreihung von Anweisungen zu nutzen, um durch das DOM zu traversieren.

$(".post> .entry").click (function(){$(this).next(".image").slideToggle().parent().siblings('div').find('.image:visible').slideUp();});

Was macht das Ding? Die Funktionsweise ähnelt dem bekannten Akkordeon-Effekt. Klickt man das das innere Element des post-Elementes an, wird das darin eingebettete Bild ausgefahren (slideToggle()). Danach springt die Anweisung auf das parent-Element, sucht alle divs, schaut nach, ob dort sichtbare Bilder drinstecken (identifiziert durch das Klassenattribut .image) und läßt diese einfahren.Es gibt natürlich auch eine jQuery-Erweiterung für den Effekt von Jörn Zaefferer, die war mir jedoch für meinen Anwendungsfall zu viel Kanone auf Spätzchen.Wenn das Projekt veröffentlicht wird, poste ich mal einen Nachtrag.

Dieser Beitrag wurde unter JavaScript, jQuery, Tipps & Tricks abgelegt und mit , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

2 Antworten auf jQuery: Accordion-Effekt oder: das Eltern-Element aus dem Kind ansteuern

  1. Webagentur sagt:

    Danke … aber bei mir will das Ding irgendwie nicht funktionieren.

  2. Oliver sagt:

    Ich habe mir den das Stückchen Code gerade noch einmal angesehen und mit der aktuellen jQuery-Version auf Herz und Nieren getestet (wobei: so viel zu testen ist da ja nicht). Mit den vorgegebenen Parametern funktioniert das einwandfrei.Ich habe eine kleine Demo online gestellt, damit man sich den (funktionierenden) Quellcode mal ansehen kann:http://hasematzel.de/demo/jquery/accordion.htmlNoch etwas: Nico Brünjes hat sich in einem Artikel in seinem Blog über einige (benutzerfreundliche) Zusatz-Mechanismen ausgelassen:http://codecandies.de/2008/12/09/sliden-und-scrollen-mit-jquery/

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>