javascript - jQueryのスライド効果

Question

こんにちは、私はjQueryのスライド効果でこの問題を抱えています。私が得たい効果は、質問をクリックすると答えがスライドダウンすることです。最初の質問では機能しますが、次のいくつかの質問では機能しません。ここに例へのリンクがありますhttp://jsfiddle.net/p8CLN/3/ $(document).ready(function(){ $("#question").click(function(){ $("#answer").slideToggle("slow"); }); }); 私は本当にこれに困惑しています。

Answer 1

すべてのIDをクラスに変換し、クリック関数にコンテキストを与えます。

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

ここで更新されたフィドルを参照してください-http://jsfiddle.net/teddyrised/p8CLN/8/

Answer 2

IDは一意である必要があります。

これが更新されたフィドルです。IDをクラス名に置き換え、.next()適切な回答要素を取得するために使用しました。

Answer 3

questionこれは、IDがとの複数の要素を使用しているためですanswer。jqueryは最初に見つかったIDの後でコレクションの構築を停止するため、IDは一意である必要があります。

私はあなたのフィドルを修正するために更新しました：

http://jsfiddle.net/p8CLN/6/

また、CSSを変更する必要がありnext('.answer')、クリックされた質問に対する後続の回答のみにトグルをターゲットにするための使用法を追加したことに注意してください。

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

Answer 4

複数の要素に同じ ID を指定します。ID は一意である必要があります。ドキュメントの準備ができたら。document.ready では、ソリューションとして次を使用できるクリック イベントをバインドできます。ここに例があります

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