1

少し助けが必要です。まだjQueryの初心者です...私は製品パッケージの比較表を持っています。最初の列には関数が含まれています。関数をクリックすると、関数が開き、アコーディオンスタイルで関数の説明が表示され、アクティブなアコーディオンヘッダーとして関数名が太字になります（クラス'active'が追加されます）。デフォルトでは、すべてのアコーディオンが閉じています。同時に開くアコーディオンは1つだけにしたいので、訪問者が別のアコーディオンをクリックすると、前のアコーディオンが自動的に閉じます。私はこの作品を作りました。アコーディオンヘッドをもう一度クリックして閉じると、すぐに再び開くので問題が発生しますが、アクティブなクラスが削除されます。開いた1つのアコーディオンをすぐに再び開かずに閉じるにはどうすればよいですか（ifステートメントについて考えましたが、どのように機能させるかはわかりません...）？

これがhtmlです：

<tr>
    <td><div class="accordion"><h4><a href="javascript:(void)">Accordion head</a></h4><div class="module-desc">Service description</div></div></td>
    <td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
    <td><img src="assets_wm/images/simeimg.png" alt="pipa" /></td>
    <td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
</tr>
<tr>
    <td><div class="accordion"><h4><a href="javascript:(void)">Accordion head</a></h4><div class="module-desc">Service description</div></div></td>
    <td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
    <td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
    <td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
</tr>
<tr>
    <td><div class="accordion"><h4><a href="javascript:(void)">Accordion head</a></h4><div class="module-desc">Service description</div></div></td>
    <td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
    <td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
    <td><img src="assets_wm/images/someimg.png" alt="pipa" /></td>
</tr>

jQueryコードは次のとおりです。

$(document).ready(function(){
$(".module-desc").hide();
$(".accordion h4").click(function(){ 
        $(".accordion").find(".module-desc").hide("fast"); 
        var thisBlock = $(this).parent().index('.accordion');
        $(".accordion").find(".active").not($(this)).removeClass("active");
        $(this).toggleClass("active").next().slideToggle("fast");
        $(this).parent().toggleClass("activeToggle").siblings()
.removeClass("activeToggle").children(".module-desc").hide("fast");
        return false;       

    });
});

JsFiddleリンク： http ：//jsfiddle.net/5QT6A/ サービスの説明のみを非表示にする必要があります。アコーディオンが閉じた後でも、画像は表示されたままである必要があります。

4

1 に答える 1

0

私の以前の答えよりも簡単な方法があることに気づきました。最初にクリックされたアイテムのアクティブクラスを切り替え、次のアイテム（コンテンツ）でスライドトグルを実行します。次に、クリックされたアイテム以外のすべてについて、アクティブなクラスを削除し、次のアイテム（コンテンツ）を上にスライドします。

$(document).ready(function(){
    $(".module-desc").hide();
    $(".accordion h4").click(function(){
        $(this).toggleClass("active").next().slideToggle("fast");
        $(".accordion h4").not($(this)).removeClass("active").next().slideUp("fast");
        return false;
    });
});

例：jsfiddle

于 2012-09-02T10:43:05.593 に答える