javascript - 如何使用 JQuery 保持在 'instance' 内

Question

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

我已将一类“问题”分配给 <a>标记，并“回答”<div> .当用户点击问题时，答案会滑落。但是，我遇到的问题是当他们点击 <a href="#" class="question"> 时, 所有 <div class="answer">的显示。

我怎样才能让它的父 .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/

谢谢!

Answer 1

$('li.question').click(function(e) {
    $(this).find('div.answer').slideToggle('fast');
    e.preventDefault();
});