JQuery am nächsten () Hilfe

Question

Also ich habe mehrere Container mit diesem Markup auf einer Seite:

        <div class="box w400">
            <div class="box-header">
                <span class="expand-collapse">expand/collapse</span>
                <h3>Heading</h3>
            </div>
            <div class="box-content">
                <p>Some content here...</p>
            </div>
        </div>

Und ich versuche, das zu erreichen, nachdem auf der .expand-Zusammenbruch Spanne klicken, wird der .box-Inhalt div gleitet oben oder unten (Toggle).

Hier ist die jQuery Ich verwende, ich versuche, dies zu erreichen, mit am nächsten ():

        $(document).ready(function() {
            $('.expand-collapse').click(function() {
                $(this).closest('.box-content').slideToggle('slow');
            });
        });

Es ist aber aus irgendeinem Grund nicht funktioniert: (

Answer 1

Versuchen Sie folgendes:

$(document).ready(function() {
    $('.expand-collapse').click(function() {
        $(this).parent().next('.box-content').slideToggle('slow');
    });
});

Das wählt das nächste Geschwister der Eltern div, spielt es keine Verwendung am nächsten machen.

Answer 2

am nächsten () findet das schließt Mutterelement. In Ihrem Fall ist die Spannweite hat keine übergeordneten Elemente mit Klasse .box-Inhalt. warum nicht einfach tun $ slideToggle ( 'langsam ') (' Box-Inhalt..'); ??

edit: ich den Teil verpasst, wo man mehrere davon auf einer Seite haben. die parent (). nächstes sollte funktionieren.