jQuery slideToggle과 동일한 두 개의 사업부가 있지만 그 중 하나만 작동합니다.

Question

가능한 경우 도움이 필요하십니까?

미리 답변 해 주셔서 감사합니다.

여기 내 문제입니다.

두 개의 동일한 div가 연속으로 있습니다. 그들은 h3과 p를 포함합니다. h3을 클릭하면 슬라이드가 표시됩니다. p.

slideToggle은 첫 번째 div에서 제대로 작동하지만 두 번째 div에서는 전혀 영향을주지 않습니다.

내가 잘못 될 수있는 아이디어가 있습니까 ??

내 코드는 다음과 같습니다 ...

HTML

<section class="twocol"> 
<div id="accordionPanel"> 
<h3 class="accordionControl">This is the title of the content area</h3> 
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p> 
</div> 
</section> 

<section class="twocol"> 
<div id="accordionPanel"> 
<h3 class="accordionControl">This is the title of the content area</h3> 
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p> 
</div> 
</section> 

CSS

#accordionPanel { 
@include lightgreygradient;} 

.accordionControl { 
&:hover {cursor: pointer;} 
} 

.accordionText {display:none;} 

자바 스크립트

,210

Answer 1

당신은 동일한 ID <div id="accordionPanel"> 두 된 div를 대신 클래스를 사용 : <div class="accordionPanel">, 다음 자바 스크립트 대신 클래스를 사용하여 요소를 참조합니다 :

$('.accordionPanel').on('click', '.accordionControl', function (e) { 
    e.preventDefault(); 
    $(this).next('.accordionText').not(':animated').slideToggle(); 
}); 

Answer 2

를 그냥 코드에서 $(document)에 $('#accordionPanel') 교체

$(document).on('click', '.accordionControl', function (e) { 
 
e.preventDefault(); 
 
$(this).next('.accordionText').not(':animated').slideToggle(); 
 
});

<section class="twocol"> 
 
<div id="accordionPanel"> 
 
<h3 class="accordionControl">This is the title of the content area</h3> 
 
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p> 
 
</div> 
 
</section> 
 

 
<section class="twocol"> 
 
<div id="accordionPanel"> 
 
<h3 class="accordionControl">This is the title of the content area</h3> 
 
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p> 
 
</div> 
 
</section> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 3

당신은 1 개 이상의 HTML 전자가 id과 같은 값, 즉 'accordionPanel' 모든 HTML 요소에는 항상 고유 ID가 있어야합니다. 따라서 여기에 클래스 이름을 사용하여 작업을 바인딩 할 수 있습니다.

$('.twocol').on('click', '.accordionControl', function (e) { 
    e.preventDefault(); 
    $(this).parent('.twocol').find('.accordionText').not(':animated').slideToggle(); 
});