0

私は正常に動作する作業中のjQueryスクリプトを持っています。つまり、その目的を果たします。

問題は、このスクリプトをより効率的にするにはどうすればよいかということです。

現在、スクリプトは、ユーザーが ID を持つ特定の HTML5 セクション タグの上にマウスを置いた (ホバーした) 瞬間にアクティブになります。この時点で、スクリプトは「noDisplay」という名前の既存のクラスを、サブメニュー リストを含む下位の nav タグから削除するため、コンテンツがユーザーに表示されるようになります。このサブメニュー リストは、3 ～ 4 レベルの深さになる場合があります。サブメニューはクラス (subMenu1、subMenu2、subMenu3、subMenu4 など) に保持されます。スクリプトは、指定されたセクション ID とそのサブレベル クラスのそれぞれを個別に提供するように記述されています。

基本的に、スクリプトは、マウス ホバー時にクラス「noDisplay」を削除して DOM と対話し、マウスを離すと同じクラスを復元​​します。（分かりやすい説明を心掛けています。ない場合はお尋ねください。）

ここに JSfiddle があります:ここにリンクの説明を入力してください

誰かがこれをより効率的に行う方法を提案してくれることを願っています。おそらく、より多くのセクション (#ID) とサブメニュー レベル (レベルごとのクラス) があります。

CSS プロパティ 'display: none;' の使用 および「表示:ブロック;」が最も簡単な解決策ですが、これは望ましくありません。なぜなら、検索ボットは、ユーザーまたはスクリーン リーダーに非表示のフラグが付けられたコンテンツをスキップすることを決定するからです。ここで使用されているクラス 'NoDisplay' は、コンテンツをユーザーに見えないようにし、スクリーン リーダー (したがって、ほとんどの検索ボット) に対する読みやすさを維持します。

したがって、基本的にスクリプト関数はそのまま残り、ホバー時にクラス「noDisplay」を削除および追加します。目標は、新しいセクションごとにコードを記述して現在のスクリプトを拡張するのではなく、各セクションにインスタンス変数を使用できる、より効率的なスクリプトを取得することです。

//section1$("#section1 .NavUL1 .subMenu1").hover(function(){
    $(".NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".NavUL2").addClass("noDisplay");            //no display
});
$("#section1").hover(function(){
    $("#section1 .NavUL1").removeClass("noDisplay");            //display
    },function(){
    $("#section1 .NavUL1").addClass("noDisplay");            //no display
});
$("#section1 .NavUL1 .subMenu1").hover(function(){
    $(".NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".NavUL2").addClass("noDisplay");            //no display
});
//#section2
$("#section2").hover(function(){
    $("#section2 .NavUL1").removeClass("noDisplay");            //display
    },function(){
    $("#section2 .NavUL1").addClass("noDisplay");            //no display
});
$("#section2 .subMenu1").hover(function(){
    $(".subMenu1 .NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".subMenu1 .NavUL2").addClass("noDisplay");            //no display
});
$("#section2 .subMenu2").hover(function(){
    $(".subMenu2 .NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".subMenu2 .NavUL2").addClass("noDisplay");            //no display
});
$("#section2 .subMenu3").hover(function(){
    $(".subMenu3 .NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".subMenu3 .NavUL2").addClass("noDisplay");            //no display
});
$("#section2 .subMenu4").hover(function(){
    $(".subMenu4 .NavUL2").removeClass("noDisplay");            //display
    },function(){
    $(".subMenu4 .NavUL2").addClass("noDisplay");            //no display
});
4

3 に答える 3

3

私の提案は、新しいクラスを作成することです。それを何と呼んでもかまいませんが、デモンストレーションの目的でそれを呼び出しますhover-class

次に、それは簡単になります：

$('.hover-class').hover(
    function() { $(this).addClass('noDisplay'); },
    function() { $(this).removeClass('noDisplay'); }
);
于 2013-10-08T22:44:32.453 に答える
0

そもそもなぜjsを使うのですか？Css はホバー状態を完全に処理できます。IMO では、CSS ソリューションがある場合は常にそれを使用する必要があります。

私はあなたのフィドルにいくつかの簡単な（そして汚い）変更を加えました：http://jsfiddle.net/3epRN/1/

マークアップから一連のクラスと ID を削除し、すべての js を削除し、css を少し調整しました。関連する css は次のようになります。

.sectionBox nav {
     display: none;   
}
.sectionBox:hover nav {
    display: block;
    position: absolute;
    top: 90%;
    left: 50px;
    background-color:#646464;
    z-index: 5;
}
.sectionBox nav ul ul {
    display: none;    
}
.sectionBox nav ul li {
    position: relative;
}
.sectionBox nav ul li:hover ul {
    display: block;
    position: absolute;
    top: 0;
    left: 80%;
    background-color:#646464;
    z-index: 5;
}

明らかに、これには微調整が必​​要ですが、あなたはその考えを理解していると確信しています...

編集
私はあなたにとって問題であるという部分を見逃したことを認めなければなりませdisplay:noneん. 理由についてのあなたの議論には同意できないと言わざるを得ません (ネット上で使用されており、クローラーやスクリーン リーダーは最近では十分にスマートです)。

そうは言っても、コンテンツを非表示にするために現在使用しているcssスタイリングを（noDisplayクラスを追加して）使用することを妨げるものは何もありませんdisplay:none;。普通display:block:

    height: auto;
    width: auto;
    clip: auto;
    overflow: visible;

結果は、js ソリューションと同じになります。実演するためにフィドルを更新しました： http://jsfiddle.net/3epRN/2/

于 2013-10-08T22:54:31.817 に答える