3

私が取り組んでいる Web サイトには、ナビゲーション メニュー (CSS 形式の順序なしリスト) と、いくつかのカテゴリ (子順序なしリスト) のサブメニューがあります。

次の CSS ルールは、サブメニューの順序なしリストを非表示にします。

.main-navigation ul ul {
    display:none;
}

そして、この CSS ルールは、訪問者が最上位のメニュー リンクの上にカーソルを置いたときに、サブメニューの順序なしリストを表示します。

.main-navigation ul li:hover > ul {;
    display:block;
}

これは、ブラウザで JavaScript が無効になっている (存在しない可能性がある) ユーザーのために行われます。

今、私は jQuery でそのナビゲーション メニューにスパイスを加えています。最初に行う必要があるのは、CSS によって指定されたホバー時の動作を無効にすることです。何らかの理由で私はそうするのに苦労しており、助けが必要です。これが私が試したことです：

jQuery(document).ready(function($) {
     $('.main-navigation ul li:hover > ul').css('display', 'none');

});

運が悪かったのは、CSS がまだ動作を制御しており、jQuery が存在しないかのように、ホバーするとサブメニューがポップアップすることです。つまり、私はそれを正しく行っていません。

誰かがこれをどのように行うべきかを説明してくれたら幸いです!

4

2 に答える 2

3

あなたができる最善のことはmain-navigation、親からクラスを削除することです。そうしないと、JavaScript から疑似クラスのスタイルを操作できません。

于 2013-05-21T14:20:07.390 に答える
3

これを試して：

デモ

jQuery(document).ready(function($) {
     $('.main-navigation ul li').on('mouseover',function(){
        $('.main-navigation ul li:hover > ul').css('display', 'none');
     });
});
于 2013-05-21T14:21:15.407 に答える