Question

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

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

喜欢这个......

链接：


    a 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（） - 函数，但这对我没什么帮助。

Answer 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

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

Answer 2

我看到的一些事情：

在你的锚点链接中，你需要围绕你的id值引用（id =“815”而不是id = 815）
如果你想把它们放在变量中并且只是通过调用那个变量来重用它们，你需要把jQuery $放在你的选择器周围（menu [i] = $（“＃”+ j [i]） ;）
我不知道你的rubrik [i]来自哪里，但如果你试图根据它在dom中的位置调用一个元素，你需要使用“：eq（x）”选择。就像你想要使用HoverTopSubMenuBlock类获取第3个元素一样，你可以用$（“。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();
});

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

Answer 3

试试这个......

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

请参阅此Example

问候。

Answer 4

感谢您的帮助！

一旦我的问题得到解答，我会收到一封电子邮件通知，所以我指望尝试，并找到解决方案。结束了与MG_Bautista建议几乎相同的代码。

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

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

4 个答案: