JQuery mais próximo () ajuda

Question

Então, eu tenho vários recipientes com essa marcação em uma página:

        <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 eu estou tentando conseguir isso depois de clicar no período .expand-colapso, o div .box-conteúdo irá deslizar para cima ou para baixo (alternar).

Aqui está o jQuery que estou usando, eu estou tentando conseguir isso com mais próximo ():

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

Mas não está funcionando por algum motivo: (

Answer 1

Tente isto:

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

que seleciona o próximo irmão da div pai, não fazem uso de mais próximo.

Answer 2

mais próximo () localiza o elemento fecha pai. No seu caso, o tempo não tem nenhum elementos pai com classe .box-content. porque não basta fazer $ slideToggle ( 'lento ') (' box-conteúdo..'); ??

Edit: Eu perdi a parte onde você tem vários deles em uma página. o pai (). seguinte deve funcionar.