다른 클래스를 클릭 할 때 클래스의 다음 인스턴스 만 표시

Question

.read-more 클래스를 클릭하면 텍스트가있는 div가 표시됩니다. 내가 직면 한 문제는 .read-를 클릭하면 모든 .slide-box 인스턴스가 특정 .read-more 바로 아래에 표시되는 대신 표시된다는 것입니다. 난 단지 클래스 사업부의 다음 인스턴스를 대상으로 어떻게 성공없이

$.next('div.slide-box').css('position','static'); 

..

: 내가 사용하려고

$(".read-more").click(function() { 
    $(this).css('display','none'); 
    $('div.slide-box').css('position','static'); 
    $('.accordion .txt-box').css('border','none'); 
    $('.accordion .txt-box p').css('margin','0'); 
}); 

:

여기에 내 현재 코드입니다. 슬라이드 박스? jQuery의 .find() 도움이 될 수

Answer 1

다음을 참고해야합니다. 이 시도 : 당신이 'TXT 박스'클래스 사업부와 클래스 사업부있을 것이라는 점을 가정 여기

$(this).closest('.txt-box').next('div.slide-box').css('position','static'); 

: 제공된 마크 업을 기반으로

$(this).next('div.slide-box').css('position','static'); 

이 코드를 시도 할 수 있습니다 각 인스턴스 옆에 '슬라이드 상자'가 있습니다.

Answer 2

나는 그것이 WP 사이트이기 때문에 그대로 마크 업을 유지 할 수 있도록 바라고

<div class="txt-box"> 
<h2>txt</h2> 
<h3>txt</h3>           
<p>txt txt.....<span class="read-more"> -Read More</span></p> 
<a class="opener" href="#">plus</a> 
</div> 
<div class="slide-box"> 
<p>Itxt txt.....<span class="read-less"> -Less</span></p>          
</div> 

.. : 여기

는 마크 업입니다. http://api.jquery.com/find/

다음은 주석에서 지적한 '다음'대신 페이지의 첫 번째 요소를 실제로 반환합니다. $('div.slide-box')

그래서이 $('div.slide-box')[0] 작동합니다 :

이 JQuery와 요소의 배열을 반환합니다.