한 페이지에 여러 개의 slideToggle 사용

Question

나는 slideToggle을 사용하여 링크를 클릭하면 내용을 표시하는 "드롭 다운"을 만들었습니다.

"열림 시간보기"를 클릭하면 div 표시 시간이 표시됩니다.

문제는 제 페이지에 여는 시간이 다른 여러 위치가 있다는 것입니다. 그래서 하나의 기능을 사용하여 링크를 클릭하면 모든 숨겨진 div가 열립니다. 어떻게 관련성있는 div에 하나의 링크 만 연결할 수 있습니까?

JSFiddle

HTML :

<div class="timeList"> 
    <a>See opening times</a> 
    <p class="openingTimes" style="display: none;"> 
    <strong>Mon-Fri</strong>: 7am - 5.30pm<br /> 
    <strong>Sat</strong>:<br /> 
    <span class="seasonTimes"><em>Summer</em>: 7.30am - 5.30pm<br /> 
    </span> 
    <span class="seasonTimes"><em>Winter</em>: 8am - 5pm<br /> 
    </span> 
    <span class="seasonTimes"><em>November - March</em>: 8am - 1pm<br /> 
    </span> 
    <strong>Sun</strong>: Closed 
    </p> 
    </div> 
<br /><br /> 
<div class="timeList"> 
    <a>See opening times</a> 
    <p class="openingTimes" style="display: none;"> 
    <strong>Mon-Fri</strong>: 8am - 5.30pm<br /> 
    <strong>Sat</strong>:<br /> 
    <span class="seasonTimes"><em>Summer</em>: 90.30am - 5.30pm<br /> 
    </span> 
    <span class="seasonTimes"><em>Winter</em>: 10am - 5pm<br /> 
    </span> 
    <strong>Sun</strong>: 10am - 5.30pm 
    </p> 
    </div> 

jQuery를 : 당신의 코드

$(".timeList a").click(function() { 
    $(".openingTimes").slideToggle("slow"); 
}); 

Answer 1

시도 클릭 한 요소를 얻을 수 $(this) 참조를 사용하고 블록의 사업부 openingTimes을 발견하고 그것을

을 밀어 수 있습니다 전환하려는 요소가 <p class="openingTimes">입니다. click 이벤트를 처리하고있는 <a>의 다음 형제, 그래서 당신은 단지 다음 요소에 대한 참조를 얻기 위해 몇 가지 간단한 DOM 탐색을 사용할 수 있습니다 : 함수 내부

$('.timeList a').click(function(e) { 
    $(this).next().slideToggle('slow'); 
}); 

을 this 앵커의 실제 DOM 요소입니다 $(this)은 해당 요소를 포함하는 jQuery 객체를 만들고, .next()은 DOM에서 그 뒤에 오는 요소를 가져오고, 실제로는 .slideToggle('slow')이 실제 토글 링을 수행합니다.

선택적으로 선택기를 .next()으로 전달하여 선택기와 일치하는 다음 요소 만 선택할 수도 있습니다. 각 <div class="timeList"> 요소 내에 다수의 앵커를 가지고 있다면 당신은 사용을 고려할 수 있습니다 대신

$(this).next('.openingTimes').slideToggle('slow'); 

합니다. 비록 당신이 보여준 HTML은 필요 없을 것입니다.

Answer 2

문제는 ... 당신은 BTHE 브라우저 때문에 .. 클래스 openingtimes 모든 사업부를 선택하고 slideToggle을 사용하고 있었다 두 openingtimes 전화로 이것을 찾습니다 .. 그것은 divs를 모두 슬라이드 ...

이

$(this).parent().find(".openingTimes").slideToggle("slow"); 

또는

$(this).next().slideToggle("slow"); 

working fiddle here

Answer 3

그것에 나를 이길

$(".timeList a").click(function() { 
    $(this).parent('.timeList').children(".openingTimes").slideToggle("slow"); 
});