JQuery 확장 섹션

Question

나는 클릭 (click)시 확장 가능한 세 개의 섹션이 있는데, 잘 작동합니다. 그러나 확장 된 섹션 내에서 열린 섹션을 닫아야하는 버튼이 있지만 첫 번째 섹션의 닫기 버튼 만 실제로 섹션을 닫습니다. 두 번째 및 세 번째 섹션의 닫기 버튼은 타겟팅하는 모든 클래스와 ID가 동일해도 종료되지 않습니다.

HTML

<div id="first-section"> 
<a id="first-section-link"></a> 
</div> 

<div id="second-section"> 
<a id="second-section-link"></a> 
</div> 

<div id="third-section"> 
<a id="third-section-link"></a> 
</div> 

<div id="first-expanded" class="expanded-section"> 
<a id="closeBtn"></a> 
</div> 

<div id="second-expanded" class="expanded-section"> 
<a id="closeBtn"></a> 
</div> 

<div id="third-expanded" class="expanded-section"> 
<a id="closeBtn"></a> 
</div> 

JQuery와

$('#closeBtn').on('click', function() { 
    $('.expanded-section').slideUp(350); 
}); 

$('#first-section-link').on('click', function() { 
    $('#first-expanded').delay(350).slideDown(350); 
}); 

$('#second-section-link').on('click', function() { 
    $('#second-expanded').delay(350).slideDown(350); 
}); 

$('#third-section-link').on('click', function() { 
    $('#third-expanded').delay(350).slideDown(350); 
}); 

Answer 1

당신은 각 요소에 대해 같은 id 속성을 사용할 수 없습니다. id 대신 class을 사용하십시오.

<a class="closeBtn"></a>