2011-06-10 6 views
0

JQuery 함수 show_hide를 사용하여 상자를 숨긴 다음 링크를 클릭하면 표시합니다. 이 모든 것이 잘 작동합니다. 두 번째 상자를 숨기려면 단순히 함수를 다시 작성하고 클래스와 함수의 이름을 바꾸는 것이 가장 간단합니다. 그러나 테이블이 있다고 가정하면 테이블의 내용이 반복되므로 클래스가 항상 반복됩니다. 똑같다. 어떻게하면 각 show_hide 항목을 개별적으로 표시 할 수 있습니까? 예 : show_hide 링크를 클릭하면 해당 항목에 대한 내용 만 표시되고 해당 항목에는 내용이 모두 표시되지 않습니다.jquery show/hide function

이 코드는 slidingDiv를 숨기는 기본 코드입니다. 그것을 복제하고 링크를 클릭하면 모든 링크가 열리는 것을 볼 수 있습니다. 클래스가 같을 때 원하는 것을 열어 볼 수있는 방법이 필요합니다. 어떤 도움을 주시면 감사하겠습니다.

$(document).ready(function(){ 
    $("slidingDiv").hide(); 
    $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $("slidingDiv").slideToggle(); 
}); 
}): 

.slidingDiv{ 
height:300px; 
background-color: #99CCFF; 
padding:20px; 
margin-top:10px; 
border-bottom:5px solid #3399FF; 
} 

.show_hide { 
    display:none; 
} 

<a href="#" class="show_hide">Show/hide</a> 

<div class="SlidingDiv"> 
    <p>blah blah blah</p> 
</div> 

답변

2

당신은이 같은 next()을 사용할 수

$('.show_hide').click(function(e){ 
     e.preventDefault(); 
     $(this).next(".SlidingDiv").slideToggle(); 
}); 

예 : http://jsfiddle.net/niklasvh/sx5TM/

+0

을 사용하여 일반 함수를 작성이 간단 당신의 도움에 .... – Hatzi

0

당신이 $ (이) Niklas- 감사 @

$(this).hide(); 
    $(this).show();