JQuery più vicino () aiuto

Question

Così ho diversi contenitori con questo markup di una pagina:

        <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>

E io sto cercando di realizzare che dopo aver fatto clic sul lasso .expand-collasso, il .box-content div scivolerà verso l'alto o verso il basso (toggle).

Ecco il jQuery che sto utilizzando, sto cercando di raggiungere questo obiettivo con più vicino ():

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

Ma non funziona per qualche motivo: (

Answer 1

Prova questo:

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

che seleziona il successivo fratello del div genitore, non fa uso di più vicino.

Answer 2

più vicino () trova l'elemento chiude genitore. Nel tuo caso, la durata non ha elementi padre con classe .box-contenuti. perché non solo fare $ slideToggle ( 'slow ') (' box-contenuti..'); ??

modifica: ho perso la parte in cui si dispone di molti di questi in una pagina. il genitore (). successiva dovrebbe funzionare.