顯示1 div當點擊h2隱藏其他div

Question

嗨在這段代碼中，我只需要顯示我點擊的問題的答案。 這裏是我的jQuery代碼：

$('document').ready(function() 
{ 
    $('.answer').hide(); 

    $('h2').on('click', function() 
    { 
     $('.answer').show().siblings('.answer').hide(); 
    }); 

}); 

這裏是我需要工作的HTML。我不允許更改HTML

<div class="content"> 
    <div class="main"> 
<h1>Een simpele bedrijfsstage FAQ (Veel gestelde vragen)</h1> 
<h2>Heb ik als leerling tijdens mijn stage schoolvakanties?</h2> 
     <div class="answer"> 
     <p>Je moet als leerling je houden aan de richtlijnen van het bedrijf. Dus als je vrij wilt hebben zul je bij begeleider een verlofaanvraag moeten indienen.</p> 
     </div> 
     <h2>Hoe kun je zien of dat een bedrijf een juiste erkenning heeft?</h2> 
     <div class="answer"> 
     <p>Via de site: www.ecabo.nl ->(helemaal bovenaan) ECABO leerbedrijven 

Bedrijfsnaam: ....... <br> 
Postcode of plaats: (b.v. 's-Hertogenbosch) <br> 
Opleiding: (b.v. ICT-Beheerder)<br><br> 

bevestig: Zoek <br><br> 

Selecteer het bedrijf.<br><br> 

Onder tabblad: Opleidingsmogelijkheden<br> 
staan de opleidingen waarvoor het bedrijf erkend is. </p> 
     </div> 
     <h2>Wat moet ik doen als ik na het solliciteren niets meer van het bedrijf hoor?</h2> 
     <div class="answer"> 
     <p>Neem direct contact met het stageloket van de ICT-Academie op zodat die actie kunnen ondernemen.</p> 
     </div> 
    </div> 

所以，如果我在h2答案點擊該h2需求可見。

Answer 1

只需使用jQuery的.next而不是.siblings。

$('document').ready(function() { 
    $('.answer').hide(); 

    $('h2').on('click', function() 
    { 
     $('.answer').hide(); 
     $(this).next('.answer').show(); 
    }); 

}); 

Answer 2

使用toggle()所有answer的div之間切換狀態。 .not()將刪除當前所需的.answer。

$('h2').on('click', function(){ 
    $(this).next('.answer').toggle(); 
    $('.answer').not($(this).next('.answer')).hide(); 
}); 

Answer 3

$('h2').on('click', function() { 
$(this).next('.answer'). 
show(). 
siblings('.answer').hide(); }); 

參考電流h2元素代替所有「答」元素的同時顯示出所需要的回答。