.slideToggle（）只有摺疊的物品

Question

所以，我已經做了大量的研究，試圖找到這個，但似乎無法找到有效的東西。我使用.slidetoggle（）在一個頁面上有多個div。在子div中顯示更多內容。我想要做的就是添加一個「全部展開」按鈕，這個按鈕只會擴展那些被關閉的按鈕，而剩下的只剩下其他按鈕。目前，擴展所有的作品，但只有當所有的項目都崩潰了。否則，它基本上只是切換，所以如果用戶打開一個項目，然後決定他們只是想查看所有項目，它將打開那些已關閉，但關閉已打開的項目。我知道有一個簡單的方法可以解決這個問題，但我對jQuery和javascript都比較陌生。

這是我目前的代碼 - 我很抱歉，如果它是sl，的，我是一個初學者！

$(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").slideToggle(); 
    }); 
}); 

到當前隱藏（摺疊）將切換此

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

唯一的答案。

Fiddle，以供參考：http://api.jquery.com/hidden-selector/

一點題外話 - 這不是必要的，你在一個$(document).ready()包裝每個click()事件 - 一個就足夠了。當jQuery被加載時，所有click()事件將被附加。

此外，它也可以具有用於所有question按鈕而不是3個獨立click()事件的單一語句：

$(".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>