如何使這個工作Java腳本更有效

Question

我有一個正常運行的jQuery腳本運行良好，這意味着它的目的。

現在的問題是：如何使這個腳本更有效率？

當用戶將鼠標懸停（懸停）某個帶有ID的HTML5分段標籤時，該腳本將變爲活動狀態。此時，腳本從包含子菜單列表的下級導航標籤中移除名爲「noDisplay」的現有類，因此內容對用戶可見。這個子菜單列表可能是三到四層。子菜單保存在類（subMenu1，subMenu2，subMenu3，subMenu4等）中。 該腳本被編寫爲單獨提供每個給定的部分ID及其子級別。

基本上，腳本通過在鼠標懸停時刪除類「noDisplay」與DOM進行交互，並在鼠標離開時恢復相同的類。 （試圖給一個明確的解釋。如果沒有，請詢​​問。）

這裏是一個的jsfiddle：enter link description here

我希望有人能提出一個方法，以更有效地做到這一點。 可能包含更多部分（＃ID's）和子菜單級別（每個級別有一個班級）。

使用CSS屬性的display：none;'和'display：block'將是最簡單的解決方案，但這是不需要，因爲搜索機器人我決定跳過標記爲用戶或屏幕閱讀器不可見的內容。這裏使用的「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 
}); 

Answer 1

我建議只使用CSS，不應該有對JS需要：

nav ul{ 
    position: absolute; 
    border: 1px solid #444444; 
    box-shadow: 8px 8px 11px #222222; 
    background: #888; 
    padding: 0.5em 0.5em 0.5em 0em; 
    list-style-type: none; 
    margin-left: 15%; 
    display: none; 
} 
.sectionBox:hover nav > ul, nav li:hover > ul { 
    display: block; 
} 

這摒棄了所有的ID，並同時保持類同樣的效果。你的HTML像現在這樣（只是一個片段）：

<ul> 
    <li><h2>various whatever1</h2></li> 
    <li><a href="localhost">link11</a></li> 
    <li><a href="localhost">link12</a></li> 
    <li><a href="localhost">link13</a></li> 
    <li><a href="localhost">link14</a></li> 
    <li><h2>sub1</h2> 
     <ul> 
      <li><a href="localhost">sub1-link11</a></li> 
      <li><a href="localhost">sub1-link12</a></li> 
      <li><a href="localhost">sub1-link13</a></li> 
      <li><a href="localhost">sub1-link14</a></li> 
     </ul> 
    </li> 
</ul> 

這是工作：http://jsfiddle.net/VGXNz/1/

更新：

如果你想使用原來的noDisplay風格那麼這將是在CSS：

nav ul{ 
    position:absolute; 
    border: 0; 
    clip: rect(0 0 0 0); 
    width: 1px; 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
} 
.sectionBox:hover nav > ul, nav li:hover > ul{ 
    height: auto; 
    width: auto; 
    margin: 0 0 0 15%; 
    border:1px solid #444444; 
    box-shadow:8px 8px 11px #222222; 
    background:#888; 
    padding:0.5em 0.5em 0.5em 0em; 
    list-style-type:none; 
    clip: auto; 
    overflow: visible; 
} 

這裏有一個小提琴：http://jsfiddle.net/KKmVU/1/

Answer 2

我的建議是創建一個新的類，稱之爲什麼但示範的目的，我們把它叫做hover-class

然後它變得簡單：

$('.hover-class').hover(
    function() { $(this).addClass('noDisplay'); }, 
    function() { $(this).removeClass('noDisplay'); } 
); 

Answer 3

，爲什麼你會使用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部分beeing你的問題。我不得不說，我不同意你爲什麼（它被用在網上，而爬行者和屏幕閱讀器現在足夠聰明）。

這樣說，沒有什麼能阻止你使用你現在用來隱藏內容的css樣式（通過添加noDisplay類）直接在你的css中使用display:none;，當你想通過添加來顯示內容時在代替以下普通display:block的：

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

其結果將是相同的JS的解決方案。我更新了我的小提琴證明： http://jsfiddle.net/3epRN/2/