1

jQueryのソート可能なアコーディオンがあります。各アコーディオンヘッダーにマウスを合わせると、すべて適切に強調表示/選択された色の状態に切り替わります。ヘッダーをクリックしてアコーディオンのその部分を開き、もう一度クリックしてアコーディオンのその部分を閉じると、強調表示/選択された色の状態が残ります。

したがって、アコーディオンに10個のセクションがある場合、そのうちの3つを開閉すると、これら3つのセクションの色は他のアコーディオンとは異なります。それは悪いUIを提供します。なぜこれが起こっているのか、そしてそれを修正する方法を知っている人はいますか?

編集:

開始する例を提供しないことについて申し訳ありませんが、私はNDAの下で作業しているため、直接提供することはできません。しかし、何が起こっているのかという共有可能な例をまとめました。

あなたはそれがここで起こるのを見ることができます:http://inadaydevelopment.com/StackOverflow/AccordionStateProblem/jqueryexample.html

それらにカーソルを合わせると、オレンジ色に変わります(正しい)。いずれかをクリックして開くと、オレンジ色のままになります(正しい)。閉じてホバリングしなくなった場合でも、青に戻る(間違っている)のではなく、オレンジのままです。

4

1 に答える 1

2

以下は、問題の原因となっている「ui-state-focus」クラスをクリアします。

$('.ui-accordion .group > h3').mouseleave(function(){
    $(this).removeClass('ui-state-focus')
})

これは、デモに対してブラウザコンソールでテストされました。

編集:セレクターは単純に次のように絞り込むことができます:

$('.ui-accordion-header')
于 2012-06-23T21:35:13.890 に答える