1

私は自分のサイトの FAQ モジュールを作成しています。すべての要素が同じクラスであっても、ページ上の単一の要素を制御できるようにしたいと考えています。これは、私がまだ慣れていない兄弟の下にあると思います。

基本的に、ユーザーが質問の div をクリックできるようにしたいのですが、それをクリックすると、質問の div が表示されるように設定されているのと同じ div 内の回答の div が表示されます (それが理にかなっている場合)。どんな助けでも大歓迎です。

<div class="set">
  <div class="question">What is the airspeed velocity of an unladen swallow?</div>
  <div class="answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div>
</div>

<div class="set">
  <div class="question">What is the airspeed velocity of an unladen swallow?</div>
  <div class="answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div>
</div>

<div class="set">
  <div class="question">What is the airspeed velocity of an unladen swallow?</div>
  <div class="answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div>
</div>
4

2 に答える 2

3

私があなたの質問を正しく理解している場合は、CSS ですべての回答を非表示に設定することから始めてください: .answer {display:none;}

次に、jquery を使用して、クリックした質問に対する正しい答えを表示できます。

$(document).ready ( function () {
    $('.question').click(function() {
        $(this).next('.answer').show();
    });
});

編集: .show() の代わりに .toggle() を使用して表示/非表示にすることもできます。

于 2008-11-04T11:35:13.783 に答える
0

おそらく、同様のことが行われているこの質問をチェックする必要があります。

基本的に、最初に要素の ID を設定して、セット クラス内の単一の要素を識別できるようにする必要があります。

次に、選択した項目を設定して適切な回答を表示するクリック イベント ハンドラーを追加できます。

兄弟を取得するための構文については、こちらのドキュメントを参照してください。

于 2008-11-04T11:35:27.807 に答える