jQuery：悬停链接显示/隐藏 div答案

【问题标题】：jQuery: hover link show/hide divjQuery：悬停链接显示/隐藏 div
【发布时间】：2013-01-23 22:24:09
【问题描述】：

这似乎是一个初学者的问题（因为我是 JavaScript 的初学者，所以我在 Google 上搜索了很多），但我仍然无法让它工作。有人可以帮我吗？

我有一个带有编号链接的列表菜单。每个链接都有自己的子菜单，我想在鼠标悬停时显示/隐藏。链接和子菜单以它们具有相似 ID 的方式连接。

像这样……

链接：

一个 id=815 class="menuItem" href="/default____815.aspx">

隐藏的 div：

div id="subMenudiv815" class="HoverTopSubMenuBlock" style="display:none">

由于我有几个 menuItems，我尝试循环一个在您手动指定 div 时有效的函数。这是我尝试过的：

var j = [66,815,1006,9581,1239,1206,816];
var menu = [];
var hoverdiv = [];
for (var i = 0; i < j.length; i++) {
    menu[i] = "#"+j[i];
    hoverdiv[i] = "#subMenudiv" + j[i];
    $(rubrik[i]).hover(function() {
        $(hoverdiv[i]).show();
    }, function() {
        $(hoverdiv[i]).delay(1000).hide(0);
    });
}

我尝试使用 each() 函数，但这对我没有多大帮助。

【问题讨论】：

嗯，你帖子的第二部分对我来说毫无意义。我建议从简单的开始。如果你想对 mouseevent 事件做 something ，我会首先关注它。您可以使用选择器 $("a.menuItem") 将链接与 menuItem 链接匹配。编写一个 jQuery sn-p 来执行此操作，并且只需使用 console.log 来记录鼠标悬停的时间。

标签： jquery html hover

【解决方案1】：

您不需要 jquery 来制作下拉菜单。您可以只使用 html 和 css。

HTML

<ul id="nav">
    <li>
        <a href="#" title="">Link 1</a>
    </li>

    <li>
        <a href="#" title="">Link 2</a>
        <ul>
            <li><a href="#" title="">Sub Link 1</a></li>

            <li><a href="#" title="">Sub Link 2</a></li>
        </ul>
    </li>
</ul>

CSS

#nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#nav > li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    position: relative;
}

#nav > li > a {
    padding: 0 10px;
    display: inline-block;
    background: #cccccc;
}

#nav > li:hover > a {

}

#nav > li > ul {
    display: none;
    position: absolute;
    width: 200px;
}

#nav > li:hover > ul {
    display: block;
}

#nav > li > ul > li { 
}
#nav > li > ul > li > a {
    display: block;
    background: #cccccc;   
    padding: 0 10px;
}

#nav > li > ul > li:hover > a {

}

Demo

以下是有关如何执行此操作的一些信息：

【讨论】：

是的，我想到了，但是我的 css 文件已经有点乱了。时间短。感谢您的帮助！

【解决方案2】：

我看到的一些事情：

在您的锚链接中，您需要在 id 值周围加上引号（id="815" 而不是 id=815）
如果你想把 jQuery $ 放在你的选择器中，你需要把它们放在一个变量中并通过调用该变量来重用它们（ menu[i] = $("#"+j[i]) ;)
我不知道你的 rubrik[i] 来自哪里，但是如果你试图根据它在 dom 中的位置调用一个元素，你需要使用 ":eq(x)"选择器。就像如果你想用类 HoverTopSubMenuBlock 抓取第三个元素，你可以用 $(".HoverTopSubMenuBlock:eq(3)")

但如果我是你，我会这样做：

$(".menuItem").hover(function(){
    var id = $(this).attr('id');
    $("#subMenudiv" + id).show();
},function(){
    var id = $(this).attr('id');
    $("#subMenudiv" + id).delay(1000).hide();
});

我认为没有所有循环和东西就可以做到。

【讨论】：

谢谢！最终我想通了。

【解决方案3】：

试试这个...

$('a.menuItem').hover(function(){
    $('#subMenudiv' + this.id).show();
}, function(){
    $('#subMenudiv' + this.id).delay(1000).hide(0);
});

看到这个Example

您好。

【讨论】：

.toggle() 现在已从 1.9 中折旧并删除
@ROYFinley 这是切换事件方法，不是这个方法。
谢谢！我自己完全弄清楚了那个解决方案。 :-) 感谢您的帮助！
@user2005500 - 您应该发布您的解决方案作为答案并接受它，以便其他人可以看到您的问题已解决，特别是如果您自己解决了问题:)

【解决方案4】：

感谢大家的帮助！

我以为一旦我的问题得到回答，我就会收到一封电子邮件通知，所以我继续尝试，并找到了解决方案。最终得到了与 MG_Bautista 建议的几乎相同的代码。

$('a.menuItem').hover(function(){
    $('#subMenudiv' + this.id).show();
}, function(){
    $('#subMenudiv' + this.id).delay(1000).hide(0);
});

【讨论】：