jquery - jQuery FAQ 演示文稿 - 展开和折叠

Question

嗨，大家好！

希望有人可以帮助我解决一个小问题。

我有一个用 jQuery 实现的展开/折叠常见问题列表。到目前为止一切正常，除了客户想要两个按钮：“全部展开”和“全部折叠”。我尝试了不同的方式，但没有任何效果。

有人会帮忙添加一些脚本来创建这些按钮吗？

HTML：

<div class="faq">
<div class="faq_item" > 
<div class="faq_header">Question</div>
<div class="faq_content" ><p>Answer</p></div>
<div class="closed"><p>Answer</p></div>
</div>
<div class="faq_item">
<div  class="faq_header">Question</div >
<div class="faq_content" ><p>Answer</p></div>
<div class="closed"><p>Answer</p></div>
</div>
<div class="faq_item">
<div  class="faq_header">Question</div >
<div class="faq_content" ><p>Answer</p></div>
<div class="closed"><p>Answer</p></div>
</div>     
</div>

JavaScript：

jQuery(document).ready(function() {
    $('.faq_content').hide();
    $('.faq_header').click(function() {
        t = $(this);
        if (!t.hasClass('active')) {
            t.parent().children('.faq_content').slideToggle();
            t.addClass('active');
        }
        else {
            t.parent().children('.faq_content').slideToggle();
            t.removeClass('active');
        }
        return false;
    });
});

这是 jsFiddle：http: //jsfiddle.net/G7tTN/

提前致谢！

Answer 1

试试这个代码：

$("#expand").click(function() {
    $(".faq_header").addClass("active").siblings(".faq_content").slideDown();
});
$("#collapse").click(function() {
    $(".faq_header").removeClass("active").siblings(".faq_content").slideUp();
});

演示：http: //jsfiddle.net/G7tTN/1/