1

我目前正在学习 JavaScript/JQuery，但在工作中遇到了一个问题。

<a>我已经为标签分配了一类“问题” ，并为<div>. 当用户点击问题时，答案会向下滑动。但是，我遇到的问题是，当他们单击 a 时<a href="#" class="question">，会显示所有<div class="answer">'s。

我怎样才能让它在点击时只显示一个它的父 .question 的 .answer？

这是我的 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

您通常想要做的是将每个单元放在一个容器元素中。一个例子是一个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 回答
0

给每个 answer 元素一个唯一的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 回答