2012-01-23 8 views
1

私は、次のコードを持っている:jQueryのオープンquestionpartと近い他のquestionpart

<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>タグはdisplay:noneに設定されていますが、それは私を悩ましているjqueryです。正確な要件:H1のクリックで

  • 、対応する答えは別のH1のクリックで
  • を開く必要があり、他の質問の答えは閉じる必要があり、対応する答えはH1の中のクリックで
  • を開く必要がありますその答えは開いている、答えは閉じる必要があります。

私は次のことを試してみた:

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

}); 

}); 

はほとんどのトリックを行いますが、現在開いている質問のクリックでverryバギーに見えた、それは閉じ、再オープンします。

どうすればこの問題を解決できますか?

+0

(すべての "答え" クラス要素を隠し、その後のみ、現在1を選択表示する)これを試してみてください。それはあなたのために仕事になります。 http://docs.jquery.com/UI/Accordion –

答えて

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

+0

両方の回答は、私の最初の解決策と同じですが、それでも、クリックされた回答を閉じてから再度開きます。このような状況では、既に開いている場合は回答を終了したいと思います。 これはCSSのプロパティ条件で行う必要がありますか? –

+0

ありがとうございますが、そのトリックはありません。それは実際に何もしません、多分スクリプトのエラー? –

+0

@DaanTwiceデモ、plsをチェックしてください。 – thecodeparadox

0

あなたはjQueryのUIのアコーディオンを見てみる必要があります

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