0

新しい Web 開発者ですので、ご容赦ください...

私たちのサイトに 10 ～ 15 の質問がある FAQ ページを作成しています。質問をクリックすると、その回答が表示されます。

例：

Q. あなたの名前は?

（質問をクリックすると、回答が下にスライドしてテキストが表示されます）

アダム

また、視聴者が回答を読んだら、もう一度質問をクリックして回答を非表示にできるようにしてください。

お時間をいただきありがとうございます！

HTML:

<p>Q. WHO IS REQUIRED TO PARTICIPATE? </p> 
<p>Everyone must participate. </p>

JS:

$(document).ready(function() { 
    $("p").click(function() { 
        $("p").slideToggle(200); 
    }); 
});
4

2 に答える 2

2

別の div 内に質問と対応する回答を含めるとよいでしょう。

HTML

    <div>
        <p class="question">Q. WHO IS REQUIRED TO PARTICIPATE?</p> 
        <p class="answer">Everyone must participate. </p>
    </div>
    <div>
        <p class="question">Q. MINIMUM AGE OF THE PARTICIPANT ?</p> 
        <p class="answer">26. </p>
    </div>

JS

$('.question').on('click', function(){
    $(this).next('.answer').slideToggle(200);
});

フィドルをチェック </p>

于 2012-12-05T17:53:34.603 に答える
0

このコードを使用してみてください。

あなたは初心者ですが、 、 、 などのセマンティック タグを使用するのULはLIセマンティックで優れています。CSS が存在しない場合でも機能するため、質問と回答を与えるH3と便利です。P

HTML:

<ul class="faq">
    <li>
        <h3><a href="#">Question 1</a></h3>
        <p>Answer</p>
    </li>
    <li>
        <h3><a href="#">Question 2</a></h3>
        <p>Answer</p>
    </li>
</ul>

JavaScript

$('.faq > li > h3 > a').click(function(){
    $(this.parentNode).next().slideToggle(200);
    return false;
});

フィドル: http://jsfiddle.net/bhvZx/

于 2012-12-05T17:53:43.330 に答える