.slideToggle() 붕괴 된 항목 만

Question

그래서 이것을 찾기 위해 많은 조사를 해봤지만 작동하는 것으로는 보이지 않습니다.

.slidetoggle()을 사용하여 페이지에 여러 div가 있습니다. 하위 div에 더 많은 콘텐츠를 표시합니다. 내가하고 싶은 일은 "모두 펼치기"버튼을 추가하는 것입니다.이 버튼을 사용하면 닫힌 사람들 만 확장 할 수 있고 나머지는 혼자 남겨 둘 수 있습니다. 현재 모든 항목이 축소 된 경우에만 모든 항목이 확장됩니다. 그렇지 않으면 기본적으로 전환되므로 기본적으로 사용자가 하나의 항목을 열고 나중에 모두보기를 원할 경우 닫힌 항목을 열지 만 이미 열려있는 항목은 닫습니다. 이 문제를 해결할 수있는 쉬운 방법이 있다는 것을 알고 있지만, jQuery와 javascript에 비교적 익숙하지 않습니다.

다음은 현재 코드입니다. 부주의 한 경우 사과드립니다. 초보자입니다!

$(document).ready(function(){ 
$(".question1").click(function(){ 
$("#answer1").slideToggle(); 
}); 
}); 

$(document).ready(function(){ 
$(".question2").click(function(){ 
$("#answer2").slideToggle(); 
}); 
}); 

$(document).ready(function(){ 
$(".question3").click(function(){ 
$("#answer3").slideToggle(); 
}); 
}); 

$(document).ready(function(){ 
$(".expandall").click(function(){ 
$(".answer").slideToggle(); 
}); 
}); 

그리고 내, HTML

<button class="expandall">Expand All</button> 
<div class="question"> 
<button class="question1"><b>This is a Question</b></button> 
</div> 

<div id="answer1" class="answer" style="display:none;"> 
This is an answer 
</div></div> 

<div class="question"> 
<button class="question2"><b>This is a Question</b></button> 
</div> 

<div id="answer2" class="answer" style="display:none;"> 
This is an answer 
</div></div> 

<div class="question"> 
<button href="#" class="question3"><b>This is a Question</b></button> 
</div> 

<div id="answer3" class="answer" style="display:none;"> 
This is an answer 
</div></div> 

도와주세요!

Answer 1

현재 전환됩니다 (붕괴) 숨겨진이

$(document).ready(function() { 
    $(".expandall").click(function() { 
    $(".answer:hidden").slideToggle(); 
    }); 
}); 

에만 답변에이

$(document).ready(function(){ 
    $(".expandall").click(function(){ 
    $(".answer").slideToggle(); 
    }); 
}); 

변경하는 경우.

Fiddle

및 참조 : http://api.jquery.com/hidden-selector/

(!) 참고로는 - 그것은 당신이 하나의 $(document).ready() 각 click() 이벤트를 포장하는 것이 필요는 없습니다 - 하나는 충분하다. jQuery가로드되면 모든 click() 이벤트가 첨부됩니다. 또한

는 대신 3 개 별도의 click() 모든 이벤트 question 버튼에 하나의 문이 수도 :

$(".question button").click(function() { 
    $(this).parent(".question").next(".answer").slideToggle(); 
}); 

Fiddle 및 조각 등 (제거 answers에서 실수로 두 번째 닫는 </div> 태그)

:

$(document).ready(function() { 
 
    $(".question button").click(function() { 
 
    $(this).parent(".question").next(".answer").slideToggle(); 
 
    }); 
 
    $(".expandall").click(function() { 
 
    $(".answer:hidden").slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="expandall">Expand All</button> 
 
<div class="question"> 
 
    <button class="question1"><b>This is a Question</b> 
 
    </button> 
 
</div> 
 
<div id="answer1" class="answer" style="display:none;">This is an answer</div> 
 
<div class="question"> 
 
    <button class="question2"><b>This is a Question</b> 
 
    </button> 
 
</div> 
 
<div id="answer2" class="answer" style="display:none;">This is an answer</div> 
 
<div class="question"> 
 
    <button href="#" class="question3"><b>This is a Question</b> 
 
    </button> 
 
</div> 
 
<div id="answer3" class="answer" style="display:none;">This is an answer</div>