javascript - クエスト中に特定の「.answer」のみを非表示にする必要があります。その答えに再びクリックされます

Question

現在、この関数は表示されているすべての回答を非表示にしています。2 回目にクリックされた特定の質問に属する回答のみを非表示にする必要があります。私はJQueryに非常に慣れていないので、おそらくこれに対する簡単な解決策がありますが、どんな助けも素晴らしいでしょう.

$(document).ready(function() {
        $(".question").click(function () {
            $('.answer').hide(); // hides open answers before showing a new answer 
        if ($(this).next().is(":hidden")) { // check the visibility of the next element in the DOM
            $(this).next().show(); // show it
        } else {
            $(this).next().hide(); // hide it
        }
    });
});

Answer 1

オフにする HTML がないため、ここで例をモックアップしました。

HTML

<span class="question">What is your name?</span>
<span class="answer">Chase</span>
<br/>
<label class="question">How old are you?</label>
<span class="answer">25</span>
<br/>
<label class="question">What is your favorite color?</label>
<span class="answer">Blue</span>
<br/>
<label class="question">Do you like cheese?</label>
<span class="answer">Duh</span>

JavaScript / jQuery

$(document).ready(function() {
   $(".question").click(function () {
     $(this).next("span.answer").fadeToggle();
   });
});

nextメソッドを使用して、次.answerのclickedを取得していますquestion。