Справка по JQuery closest ()

Question

Итак, у меня есть несколько контейнеров с этой разметкой на странице:

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

И я пытаюсь добиться того, чтобы после нажатия на диапазон .expand-collapse элемент div .box-content перемещался вверх или вниз (переключаться).

Вот jQuery, который я использую, я пытаюсь добиться этого с помощью closest ():

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

Но почему-то не работает: (

Answer 1

Попробуйте это:

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

Это выбирает следующий родной элемент родительского div, он не использует ближайший.

Answer 2

closest () находит закрывающий родительский элемент. В вашем случае у span нет родительских элементов с классом .box-content. почему бы просто не сделать $ ('. box-content'). slideToggle ('slow'); ??

редактировать: я пропустил часть, где у вас есть несколько из них на странице. родитель (). следующий должен работать.