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，因为它的所有样式都需要它。我只是不知道如何让每个元素都有效。

我试过（这个）.next和（this）.parent但没有运气。有什么帮助吗？

Answer 1

这是因为.view_faq_answer不是.toggler的兄弟姐妹 - 它是.view_faq的孩子，这是一个兄弟姐妹。 Robin Leboeuf的答案应该有效，但作为替代方案：

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

修改：Fiddle

Answer 2

稍微多一点的语义HTML就是使用<dl> - <dt>作为问题，<dd>作为答案。

http://jsfiddle.net/gyx5kfp3/

Answer 3

尝试使用.parent（）。find（）而不是.next（）

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

LIVE DEMO

jQuery show / hide toggler for faq list elements

3 个答案: