0

こんにちは、みんな！

誰かが私が1つの小さな問題を解決するのを手伝ってくれることを願っています。

jQueryで実装された展開/折りたたみFAQリストがあります。クライアントが「すべて展開」と「すべて折りたたむ」の2つのボタンが必要な場合を除いて、これまでのところすべて正常に機能しています。さまざまな方法で試しましたが、何も機能しませんでした。

これらのボタンを作成するためのスクリプトを追加するのを手伝ってくれる人はいますか？

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/

前もって感謝します！

4

1 に答える 1

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/

于 2012-05-16T13:52:14.140 に答える