0

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

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

目前，当用户将鼠标放在（悬停）某个带有 ID 的 HTML5 部分标签时，脚本就会激活。此时脚本从包含子菜单列表的从属导航标签中删除名为“noDisplay”的现有类，因此内容对用户可见。这个子菜单列表可能有三到四级深。子菜单按类保存（subMenu1、subMenu2、subMenu3、subMenu4 等）。该脚本被编写为单独为每个给定的部分 ID 及其子级别类提供服务。

基本上，脚本通过在鼠标悬停时删除类“noDisplay”来与 DOM 交互，并在鼠标离开时恢复相同的类。（试图给出明确的解释。如果没有，请询​​问。）

这是一个 JSfiddle：在此处输入链接描述

我希望有人可以提出一种更有效地做到这一点的方法。可能有更多部分（#ID）和子菜单级别（每个级别一个类）。

使用CSS 属性 'display: none;' 和'显示：块;' 将是最简单的解决方案，但这是不希望的，因为搜索机器人决定跳过标记为对用户或屏幕阅读器不可见的内容。此处使用的“NoDisplay”类使内容对用户不可见，并保持其对屏幕阅读器的可读性（因此对大多数搜索机器人而言）。

所以基本上脚本功能保持不变，在 hover 时删除和添加类 '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 回答
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/

于 2013-10-08T23:00:37.013 回答
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 类）直接在我使用 的 css 中display:none;，并在您想要显示内容时通过添加以下内容来对抗它而不是一个普通的display:block：

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

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

于 2013-10-08T22:54:31.817 回答