jQuery的開放questionpart並關閉其他questionpart

Question

我有以下代碼：

<div class="faq"> 
<h1 class="question">Question</h1> 
<p class="answer">Answer</p> 
</div> 

<div class="faq"> 
<h1 class="question"> Question </h1> 
<p class="answer">Answer</p> 
</div> 

<div class="faq"> 
<h1 class="question"> Question </h1> 
<p class="answer">Answer</p> 
</div> 

，我喜歡點擊H1擴大了答案。 <p>標籤被設置爲顯示：無，但它是jquery，它正在擾亂我。具體要求：

• 上H1的點擊，對應答案應該打開
• 在另一個H1的點擊，其他問題的答案應該關閉，以及相應的答案應該打開
• 上的H1而點擊答案是開放的，答案應該結束。

我已經試過如下：

jQuery(".faq > h1").click(function() { 
jQuery(this).siblings().hide(); 
jQuery(this).closest(".question").children("p").toggle("slow"); 

}); 

}); 

幾乎是卓有成效的，但在目前開放的問題的點擊，它關閉並重新打開它看起來檸車。

我該如何解決這個問題？

Answer 1

jQuery(".faq > h1").on('click', 
function() { 
    var $sib = jQuery(' + .answer', this); 
    jQuery('.answer:visible').not($sib).hide('fast'); 
    if($sib.is(':visible')) $sib.hide('slow'); else $sib.show('slow'); 
}); 

DEMO

Answer 2

試試這個（隱藏所有的 「答案」 類的元素，然後只顯示當前選擇）

jQuery(".faq > h1").click(function() { 
    jQuery('.answer').hide(); 
    jQuery(this).next('.answer').show("slow"); 
});