JQuery más cercano () ayuda

Question

Así que tengo varios contenedores con esta marcado en una 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>

Y yo estoy tratando de lograr que después de hacer clic en el lapso .expand-colapso, el div .box contenido se deslizará hacia arriba o hacia abajo (conmutación).

Aquí está el jQuery que estoy usando, yo estoy tratando de lograr esto con más cercano ():

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

Pero no funciona por alguna razón: (

Answer 1

Prueba esto:

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

que selecciona el siguiente hermano del div padre, que no hace uso de la más cercana.

Answer 2

más cercano () encuentra el elemento se cierra padres. En su caso, el patrón no tiene ningún elemento de los padres con la clase .box-contenido. ¿por qué no hacer slideToggle $ ( 'lenta ') (' cuadro de contenido..'); ??

Edit: me perdí la parte donde tiene varios de estos en una página. el padre (). próximo debería funcionar.