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＆＃39; .siblings代替$('document').ready(function () { $('.answer').hide(); $('h2').on('click', function () { $('.answer').hide(); $(this).next('.answer').show(); }); });。

{{1}}

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元素而不是所有'.answer'元素。

单击h2时显示1 div隐藏其他div

3 个答案: