jQuery xhtml dd dl dt

Question

子要素を隠すために同じdtを2回クリックしなければならないので、どのようにして他のdtがクリックされると隠すようにすることができます。 ありがとうございます。

<script type="text/javascript"> 
$(document).ready(function() { 
     $('#faq').find('dd').hide().end().find('dt').click(function() { 
      $(this).next().slideToggle(); 
     }); 
    }); 
</script> 

<dl id="faq"> 
    <dt>Question 1?</dt> 
    <dd> 
     Weee look at me I can type!!! 
    </dd> 

    <dt>Question 2?</dt> 
    <dd> 
     Weee look at me I can type too!!! 
    </dd> 
</dl> 

Answer 1

私はあなたが唯一のddが一度に表示したいと仮定して、このコードを投稿するつもりです：dd要素であり、次の要素、ダウン

$(document).ready(function() { 
    $('#faq').find('dd').hide().end().find('dt').click(function() { 
     $(this).next().slideDown(); 
     $(this).siblings('dd').not($(this).next()).slideUp(); 
    }); 
}); 

• $(this).next().slideDown();スライドそれをのにスライドさせます。
• $(this).siblings('dd').not($(this).next()).slideUp();スライドup他のすべてdd要素（.not($(this).next())ビット）。

.siblings().not()と一緒にお探しのものがあります。

Demonstration JSFiddle here。

Answer 2

Here's a jsfiddleあなたのコードです。

あなたはそれが「子」ddだ切り替えることdtをクリックすることができますが、それの音で、あなたはどのdtがクリックされたときにすべての可視dd Sを非表示にします。

現在のdd隣.not()ているすべてのdtの要素をトグルすることによってこれを行うことができます。

$('#faq').find('dd').hide().end().find('dt').click(function() { 
    $('#faq').find('dd:visible').not($(this).next()).slideToggle(); 
    $(this).next().slideToggle(); 
}); 

updated jsfiddleをチェックしてください。

hereと表示されているように、clickコールバックの1行目と2行目を組み合わせることで、コードをさらにコンパクトにまとめることができます。

Answer 3

$(function() { 
$('#faq').find('dd:last-child').hide().end().find('dt').click(function() { 
    $(this).next().slideDown(); 
    $(this).siblings('dd').not($(this).next()).slideUp(); 
}); 

Iだけを追加（最後：子）クラスの疑似、私は一つだけが

ありがとう

を表示するために必要なので、私のコードは私に頭痛を与え、あなたは非常に読みやすい:-D