jQuery strosest () 도움

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 스팬을 클릭 한 후 .box-content div가 위 또는 아래로 미끄러 져 (토글)를 달성하려고합니다.

여기에 내가 사용하는 jQuery가 있습니다. 나는 이것을 가장 가까운 곳으로 달성하려고 노력하고 있습니다.

        $(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');
    });
});

부모의 다음 형제 자매를 선택합니다. 가장 가까이 사용하지 않습니다.

Answer 2

가장 가까운 곳 ()은 닫힌 부모 요소를 찾습니다. 귀하의 경우, 스팬에는 클래스 .box-content가있는 상위 요소가 없습니다. 그냥 $ ( '. box-content'). slideToggle ( 'slow'); ??

편집 : 페이지에 몇 가지가있는 부분을 놓쳤습니다. 부모 (). 다음은 작동해야합니다.