Question

我有一个运行正常的jQuery脚本，这意味着它可以达到目的。

问题是：如何使这个脚本更有效率？

目前，当用户将鼠标放置（悬停）某个带有ID的HTML5 section-tag时，脚本就会变为活动状态。此时脚本将删除名为“noDisplay”的现有类。从包含子菜单列表的从属nav-tag，因此内容对用户可见。该子菜单列表可以是三到四级深度。子菜单保存在类（subMenu1，subMenu2，subMenu3，subMenu4等）中。编写脚本是为了单独提供给定的每个部分ID及其次级类。

基本上，脚本通过删除类＆＃39; noDisplay＆＃39;来与DOM交互。鼠标悬停时，鼠标离开时恢复相同的班级。（试图给出一个明确的解释。如果不是，请问。）

这是一个JSfiddle：enter link description here

我希望有人能提出一种方法来更有效地做到这一点。可能有更多部分（＃ID＆＃39; s）和subMenu级别（每个级别的一个班级）。

使用 CSS属性＆＃39; display：none;＆＃39;和＆＃39;显示：阻止;＆＃39; 是最简单的解决方案，但不希望，因为搜索机器人决定跳过标记为对用户不可见的内容或者一个屏幕阅读器。课程＆＃39; NoDisplay＆＃39;在这里使用保持内容对用户不可见，并使其对屏幕阅读器（以及大多数搜索机器人）的可读性。

所以基本上脚本功能仍然是删除并添加类＆＃39; noDisplay＆＃39;悬停时。目标是获得一个更高效的脚本，可以使用每个部分的实例变量，而不是为每个新部分编写代码，从而扩展当前脚本。

//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

我的建议是创建一个新课程，无论如何都要调用它，但出于演示目的，我们称之为hover-class

然后变得简单：

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

Answer 2

我建议只使用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 3

为什么你会首先使用js？ Css完全能够处理悬停状态，如果有的话，你应该总是去寻找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;的css中，并在你想显示时反击它内容通过添加以下内容而不是普通的display:block：

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

结果与您的js解决方案相同。我更新了我的小提琴来证明： http://jsfiddle.net/3epRN/2/

如何使这个有效的Java脚本更有效

3 个答案: