슬라이드 "this"를 사용하여 전환 하시겠습니까?

Question

한 웹 페이지에 여러 기사를 사용하고 있습니다. 나는 단지 짧은 텍스트 소개와 슬라이드에 대한 "더 읽기"링크를 가지고 기사의 나머지 부분을 토글합니다.

나는 코드를 단순화하려고 노력 중이며 각 텍스트 블록에 고유 한 클래스 또는 ID를 사용해야하는 대신 어떤 식 으로든 this을 사용하는 솔루션을 찾고 있으며 슬라이드 전환을 처리하는 데 하나의 함수 만 사용합니다. 모든 숨겨진 텍스트 블록. 그렇게 할 수 있다면 내 코드를 개발하는 방법에 대한 힌트를 얻고 싶습니다. 나는 잘 모르겠다.

jQuery를

$(document).ready(function() { 
$(".more").click(function(){ 
$(this).next(".extra").slideToggle("fast"); 
}); 
}); 

여기서 일하는와 jsfiddle의

당신이 가서 여기

<div class="articleContent"> 
    <h1>Headline 1</h1> 
    <p>Text 1 <a href="#" class="more">read more....</a> 
    </p> 
    <p class="extra"> 
    Some more text to read 1 
    </p> 
</div> 

<div class="articleContent"> 
    <h1>Headline 2</h1> 
    <p>Text 2 <a href="#" class="more">read more....</a> 
    </p> 
    <p class="extra"> 
    Some more text to read 2 
    </p> 
</div> 

Answer 1

...이

Updated Example

$('document').ready(function() { 
    $(".more").click(function(e){ 
     e.preventDefault(); 
     $(this).parent('p').siblings(".extra").slideToggle("fast"); 
    }); 
}); 

Answer 2

에 다음 사용하지 않는 HTML g 코드 : http://jsfiddle.net/6wqsf/

자바 스크립트 :

$(".more").click(function() { 
    $(this).parent().next(".extra").slideToggle("fast"); 
}); 

Answer 3

나는 좋을 것 :

$('.articleContent').on('click', function(e){ 
    if ($(e.target).is('.more')) { 
     $(this).find('.extra').toggle(); 
    } 
}); 

JS Fiddle demo합니다.

참고 :

• .find().
• .is().
• .on().