Question

我制作了一个FAQ幻灯片切换列表，当我点击“全部显示”按钮时，我想展开所有项目。

<a href="#" class="btnShowAll">show all</a>

$(document).ready(function(){
    $('.faqList dd').hide();
    $('.faqList dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
      $(this).next().slideToggle('fast');
    });
});  

<div class="faqList">
  <dl>
   <dt>question1</dt>
   <dd>Answer1</dd>
   <dt>question2</dt>
   <dd>Answer2</dd>
  </dl> 
</div>

我该怎么做？请帮忙〜

Answer 1

如果我理解你想要正确做什么，我认为你已经过度复杂了。只需使用.slideToggle函数：

.faqList {
   display: none;
}


$(function() {

  $( ".btnShowAll" ).click(function() {
    $( ".faqList" ).slideToggle( "slow", function() {
    });
  });
});

http://jsfiddle.net/qRts9/6/

如何扩展FAQ列表中的所有项目？

1 个答案: