0

古き良きバニラ jQuery UI アコーディオンを使用しています。私のクライアントは、アコーディオン タブ (ヘッダー) のテキストを読んだ (訪問した) ときに色を変えることができるかどうか尋ねました。疑似クラス:hoverはどの要素にも適用できますが、調べた限りでは、要素にしか適用できませ:visitedん<a>。

私はこれを徹底的に検索しましたが、このトピックについては何も思いつきませんでした。それとも私の質問の仕方が悪いのでしょうか？このためにカスタム jQuery を作成する方法があると思いますが、jQuery UI アコーディオン ウィジェットを使用するように制限されています。したがって、問題はjQuery UIアコーディオンのみです。答えはノーだと思います。

誰かがアイデアを持っているなら、私はとても感謝しています。繰り返しますが、これは現在アクティブなアコーディオン タブではなく、既にアクセスされたアコーディオン タブ (過去にアクセスされ、ユーザーが移動した) 用です。

これが私の標準的なアコーディオン マークアップです。

<div id="accordion">
  <h3>Research</h3>
    <div>
      <p>Content Here</p>
    </div>
  <h3>Resources and Guides</h3>
    <div>
      <p>Content Here</p>
    </div>
  <h3>Regulations</h3>
    <div>
      <p>Content Here</p>
    </div>
</div>

これが私の単純な古い jQuery UI アコーディオン スクリプトです。

   jQuery('#accordion').accordion({
     collapsible: true, 
     active: false, 
     header: "h3", 
     heightStyle: "content"
   });

ここに私が作ったフィドルがあります： http://jsfiddle.net/Lera/UtE3C/

4

3 に答える 3

2

アコーディオンを使用するときにこれを実装した方法は次のとおりです

CSS:

.toggle-title:hover,
.toggle-title:active,
.active { /* Added .active rule */
    background: #000;
    color: white;
}

JS:

$(document).ready(function() {
    $(".toggle-content").hide();
    $(".toggle-title").click(function() {
        $(this).next(".toggle-content").slideToggle("normal");
        $(this).toggleClass('active'); //toggle class active
    });
});

デモhttp://jsfiddle.net/kevinPHPkevin/mZhTY/107/

編集済み

に変更toggleClassするだけaddClass

デモhttp://jsfiddle.net/kevinPHPkevin/mZhTY/108/

于 2013-07-23T19:47:14.067 に答える
1

単純なクリック機能でそれを行います。

実施例

$('#accordion').accordion({
    collapsible: true,
    active: false,
    header: "h3",
    heightStyle: "content"
});

$('#accordion h3').click(function () {
    $(this).addClass('newClass');
});

.newClass {
    color:red;
}
于 2013-07-23T20:28:29.113 に答える