다음/이전/가장 가까운 요소를 선택하는 Jquery

Question

안녕하세요.이 html이 있는데 사용자가 h4를 클릭하면 몇 가지 작업을 추가하고 싶습니다.

<div class="row success"> 
<div class="col-sm-4 no-pad-r img-toggle"> 
    <?php the_post_thumbnail(); ?> 
</div> 
<div class="col-sm-6 col-sm-offset-1 no-pad-l"> 
    <h4 class="heading-toggle"><?php the_title(); ?></h4> 

    <div class="line"></div> 
    <p class="intro">"<?php the_field('first_line'); ?>."</p> 

    <div class="toggle-content" style="display: none"> 
     <div class="main-copy"> <?php the_content(); ?></div> 
     <h5><?php the_field('author_name'); ?></h5> 

     <p class="position"><?php the_field('author_position'); ?></p> 
    </div> 
    <button class="btn toggle btn-danger"></button> 
</div> 

그래서 난 클릭에 대한 몇 가지 클래스와 slideToggle을 추가 할하지만 난 적절한 요소를 선택하지 못할.

이것은 내 시도입니다.

$(".heading-toggle").click(function() { 
    $(this).next(".toggle-content").slideToggle(); 
    $(this).closest(".success").toggleClass("highlight"); 
    $(this).closest(".toggle").toggleClass("open"); 
    }); 

유일한 방법은 강조 표시 클래스를 .success div에 추가하는 것입니다. 나머지 두 함수는 작동하지 않습니다. 여기서 내가 뭘 잘못하고 있니?

Answer 1

당신은 그래서 당신의 코드가 왜`slideToggle()`에 클래스를 전달하는이

$(".heading-toggle").click(function() { 
    $(this).siblings(".toggle-content").slideToggle(); 
    $(this).closest(".success").toggleClass("highlight"); 
    $(this).siblings('.btn').toggleClass("open"); 
    });