1

基本的に私はこの問題を抱えています。一度に 1 つの見出しを開くように切り替えるアコーディオンがあり、見出しの右側にある開閉画像を追加する際に問題が発生しています。

これまでのところ、見出しをクリックすると「開く」画像が削除され、「閉じる」画像の別のクラスが切り替えられるようになっています。ここで、基本的にこれらのクラスを再度交換する必要があります。これにより、別の見出しを切り替えると、他の画像が削除されて元の画像に戻るようになります。

これが私が使用しているコードです。

JavaScript

<SCRIPT>
    $("#accordion > li").click(function () {
        $("#accordian li").removeClass("faq-header");
        $(this).addClass("faq-header2");
        if (false == $(this).next().is(':visible')) {
            $('#accordion > ul').slideUp(250);
            $('#accordion > ul').addClass('faq-header');
            $(this).removeClass("faq-header");
        }
        $(this).next().slideToggle(300);
    });

    $('#accordion > ul:eq(0)').show();
</SCRIPT>

CSS

#accordion {
    list-style: none;
    margin-left:-38px;
}
#accordion ul:eq {
    background-image:url(../img/faq-open.gif);
    background-repeat:no-repeat;
    background-position:right;
    padding-right:20px;
}
#accordion li{
    display: block;
    background-color: #FFF;
    font-weight: bold;
    cursor: pointer;
}
.faq-header {
    text-align:left;
    background-image:url(../img/faq-close.gif);
    background-repeat:no-repeat;
    background-position:right;
    margin-right:20px;
}
.faq-header2 {
    text-align:left;
    background-image:url(../img/faq-open.gif);
    background-repeat:no-repeat;
    background-position:right;
    margin-right:20px;
}
#accordion ul {
    list-style: none;
    display: none;
}
#accordion ul li{
    font-weight: normal;
    cursor: auto;
    background-color: #fff;
    border-bottom:1px solid #999;
    margin-left:-38px !important;
}

ご覧のとおり、1つのクラスを削除して別のクラスを$("#accordian li").removeClass("faq-header");追加し、次を追加しました$(this).addClass("faq-header2");

しかし、選択されたセクションではなくなった後、削除.faq-header2して再度追加する必要があります。.faq-headerそれほど難しくはないように思えますが、コーディング方法がわかりません。関数なら基本的なはずです...

4

2 に答える 2

4

jQuery UI アコーディオンは実績のあるクロス ブラウザー ウィジェットであり、画像を開いたり閉じたりします (デフォルトでは左側ですが、CSS を 1 回変更すると右側に表示されます)。

こちらのとおり

使用しない場合は、ここで toggleClass のオプションを使用します。

編集

HTML を投稿していただきありがとうございます。必ずしもページ全体を意味するわけではなく、アコーディオン機能の HTML だけを意味していましたが、すばらしいですね

ただし、最初のポイントは、アコーディオンを実行するだけの HTML が少し重いようです。また、ul を ul 内に配置することも完全には有効ではありません (ドロップダウン メニュー スタイルのように、li 内に配置する傾向があります)。さらに、各 ul には 1 つの li しかないため、これらすべての ul と li にはあまり意味がないように思われます。ul と li には多くのデフォルト スタイル (箇条書き、余白、パディング、インデントなど) が含まれている傾向があり、必要な方法で表示するために必要な CSS よりもはるかに多くの CSS が必要になる可能性があります。jQuery を簡単に記述できるように、より単純な構造を採用したはずです。もう少しこのように

<div id="accordion">
    <h3>First header</h3>
    <div>First content</div>
    <h3>Second header</h3>
    <div>Second content</div>
</div>

とにかく、それは私の経験からの単なるコメントでした。目前の問題に対して、これは私にとってはうまくいきました

    $("#accordion > li").click(function () {              
            var self = $(this);
            self.next('ul').slideToggle(300, function () {
                if ($(this).is(':visible')) {
                    self.removeClass('faq-header').addClass('faq-header2')
                }
                else {
                    self.removeClass('faq-header2').addClass('faq-header')
                }
            });
            self.siblings().removeClass('faq-header2').addClass('faq-header').next('ul').slideUp(250);
        });

toggleClass は便利ですが、クラスをどのように追加および削除するかという状況では、私が思っていたほど役に立たないかもしれません

于 2012-07-10T04:16:04.317 に答える