1

私は現在 JavaScript/JQuery を学んでいますが、仕事で問題が発生しています。

<a>「質問」のクラスをタグに割り当て、 「回答」を<div>. ユーザーが質問をクリックすると、回答が下にスライドします。ただし、私が直面している問題は、 をクリックする<a href="#" class="question">とすべて<div class="answer">の が表示されることです。

クリックしたときに親の .question に対する .answer が 1 つだけ表示されるようにするにはどうすればよいですか?

ここに私のHTMLがあります:

<li class="question"><a href="#">Question 1</a>
<div class="answer"><p>This is answer for question 1</p></div></li>
<li class="question"><a href="#">Question 2</a>
<div class="answer"><p>This is answer for question 2</p></div></li>

これが私のjqueryです：

<script>
  jQuery(document).ready(function ($) {
    $('div.answer').hide();
    $('li.question').click(function() {
      $('div.answer').slideDown('fast');
      return false;
    });
  });
</script>

サイトは次のとおりです。http://topactioninvestments.com/faq/

ありがとう！

4

3 に答える 3

5 
$('li.question').click(function(e) {
    $(this).find('div.answer').slideToggle('fast');
    e.preventDefault();
});
于 2012-12-11T19:53:32.557 に答える
0

すべての回答要素に一意のid属性を与え、一意の質問を参照する質問にdata-answer属性を追加します。

以下を行います。

$('li.question').click(function(e) {
    $($(this).data("answer")).show();
});

関連するhtmlで明確にする。

<li class="question" data-answer="#answer-42">...</li>
<div class="answer id="answer-42">....</div>
于 2012-12-11T19:58:14.917 に答える
0

通常、コンテナ要素内に各ユニットを配置します。例として、divまたはその他のタグがあります。HTML が次のようになっているとします。

<div class="qa">
  <div class="question">What is 2+2?</div>
  <div class="answer">4</div>
</div>

次に、次のことができます。

$('.question').click(function(event) {
  var target = $(event.target);
  target
    .closest('.qa')
    .find('.answer')
      .show();
});

各質問と回答のマークアップは次のようになります。

<li>
  <a><strong>Why do you not just sell these option contracts?</strong></a>
  <div class="answer"><p>This is a test</p></div>
</li>

このマークアップでは、次の JavaScript が機能します。

$('li').on('click', function(event) {
  $(this).find('.answer').show();
});

デモ: jsfiddle

于 2012-12-11T19:56:53.653 に答える