javascript - Jquery/AJAXスライディングメニュー-CrazyEgg-よくある質問で使用

Question

Crazy EggがFAQに何を使用したかを理解するのに少し問題があります。同じことを正確に実装したいと思います（クリックすると質問が下にスライドし、現在アクティブな質問の青いボックスが表示されます）。

例）https://www.crazyegg.com/help

コードを調べたところ、javascriptイベントが含まれていることがわかりましたが、これを自分でスクリプト化することはできません。この動作に使用できるプラグインはありますか？私が推測するdivの表示/非表示の形式は？

Answer 1

jqueryで自分でコーディングできるはずです。非常に基本的な jQuery チュートリアルを調べて、セレクター、非表示と表示、およびクリック イベントについて説明します。クリックする各ヘッダーに ID を割り当てるだけで、クリックするとすべてのコンテンツが非表示になり、クリックされたものが表示されます。オンラインで何かを読んで、何かを試してから、コードを持って戻ってきて質問する必要があります。

Answer 2

slideToggleこの効果は、jQuery の関数を使用して簡単に実現できます。

HTML:

<span class="faq">This is a FAQ question...</span>
<div class="answer" style="display: none;">
    And this is the answer.
</div>

JavaScript:

$(document).ready(function(){
    $(".faq").click(function(){
        $(this).next("div.answer").slideToggle();
    });
});

JSFiddle: http://jsfiddle.net/ySahP/