JQuery le plus proche () aide

Question

J'ai plusieurs conteneurs avec ce balisage sur une page:

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

Et je suis en train de réaliser que après avoir cliqué sur sur la durée .expand-effondrement, la div .box contenu glissera vers le haut ou vers le bas (bascule).

Voici le jQuery j'utilise, je suis en train de réaliser cela avec le plus proche ():

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

Mais il ne fonctionne pas pour une raison: (

Answer 1

Essayez ceci:

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

Ce sélectionne le frère du div parent, il ne fait pas usage de la plus proche.

Answer 2

le plus proche ()

trouve la ferme élément parent. Dans votre cas, la durée n'a pas des éléments parents avec classe .box contenu. pourquoi ne pas simplement faire $ ( 'boîte contenu. ') slideToggle (' slow'). ??

edit: j'ai raté la partie où vous avez plusieurs de ces derniers sur une page. le parent (). doit ensuite travailler.