0

まず、メニューとコードだけが表示されているこのペンを見てください（ここでメニューをプレビューしてください）。

要点：表示されているナビゲーションバーで、[チャンネル]メニューをクリックすると、メニュー項目がスライドして表示されます。#fff問題は、メニューの背景がアクティブな状態（つまり、背景と#222色）を表していないことです。

メニューにマウスを合わせたときの背景色の設定は簡単です。しかし、これはトリッキーです。私は試してみましたが、:activeセレクターは役に立ちませんでした。何か案は？

スクリーンショット：

マウスホバーのスクリーンショットなし

マウスホバーのスクリーンショット付きメニュー

4

2 に答える 2

0

メニューが開いたら、クラスをliに追加して、再度削除することができます。

ところで：:activeあなたがそれをクリックした瞬間に動作します。

于 2012-12-15T15:13:11.003 に答える
0

jQueryを使用してクラスを追加/削除することが唯一の方法であるように見えるので、私はそれを進めました。これが私が使用したコードです。

jQuery(document).ready(function($){
  $('.menu-item > a').click(function(){
    $(this).toggleClass('selected');
  });
});

コードは、クラス（私の場合）aを持つ要素の1レベル下のリンク要素を見つけ、リンク要素にクラスを追加/削除します。.menu-itemli.selected

これが元のペンのフォークで、メニューが意図したとおりに機能しています。ここで、新しく機能しているメニューをプレビューできます。

（この質問で提供されたコードの完全なクレジット。詳細については、公式のjQueryドキュメントを参照してください。）

更新：この回答は非常に役立つ場合があります（より優れた、より単純な解決策）。

コード例：

jQuery(document).ready(function($){
    $('.collapse').on('show hide', function () {
        $(this).siblings("a").toggleClass('selected'); 
    });
});
于 2012-12-15T15:55:48.253 に答える