jQuery 显示/隐藏常见问题列表元素的切换器

Question

我一直在尝试创建一个常见问题解答样式的列表，其中有一个切换按钮，当单击幻灯片时，该按钮会打开问题的相应答案。但是，我似乎根本无法让它工作，想知道是否需要一些帮助？

我遇到的主要问题是单击一个按钮时，它们都会展开并显示答案。我想知道我是否可以实现一些东西，以便它以子元素为目标并切换它？

这是我的代码...

jQuery

   $j("ul.nav .view_faq_answer").hide();
   $j("a.toggler").click(function() { 
       $j(this).next('.view_faq_answer').slideToggle(); 
   });

HTML

   <ul class="faq">
      <li>
          <a href="#" class="toggler">+</a>
          <div class="view_faq">
             <div class="view_faq_question">question</div>
             <div class="view_faq_answer">answer</div>
          </div>
      </li>
   </ul>

我已经删除了 PHP，因此它更容易查看，而且显然不需要任何 CSS，因为它的所有样式都按照需要进行了设计。我只是不知道如何让它适用于每个单独的元素。

我试过 (this).next 和 (this).parent 但没有成功。有什么帮助吗？

Answer 1

这是因为 .view_faq_answer 不是 .toggler 的兄弟 - 它是 .view_faq 的子级，后者是兄弟。 Robin Leboeuf 的答案应该有效，但作为替代方案:

$j(this).next('.view_faq').children('.view_faq_answer').slideToggle();

编辑:Fiddle