0

This seems to be a beginners question (I've googled a lot since I am a beginner at JavaScript) but I still can't get it to work. Could someone please help me?

I have a list menu with numbered links. Each links has it's own submenu that I want to show/hide on mouse over. The link and the submenu are connected in the way that they have similar ID.

Like this...

Link:

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

Hidden div:

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

Since I have several menuItems I've tried to loop a function that's working when you specify the divs manually. This is what I've tried with:

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);
    });
}

Ive tried to use the each()-function but that didn't help me much.

4

4 回答 4

1

You don't need jquery to make a dropdown menu. You can use just html and 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

Here are some information on how to do this:

于 2013-01-23T22:28:34.313 回答
0

我看到的几点：

  1. 在您的锚链接中，您需要在 id 值周围加上引号（ id="815" 而不是 id=815 ）

  2. 如果要将它们放在变量中并通过调用该变量（ menu[i] = $("#"+j[i]); ）来重用它们，则需要将 jQuery $ 放在选择器周围

  3. 我不知道你的 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();
});

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

于 2013-01-23T22:33:33.953 回答
0

感谢所有的帮助！

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

$('a.menuItem').hover(function(){
    $('#subMenudiv' + this.id).show();
}, function(){
    $('#subMenudiv' + this.id).delay(1000).hide(0);
});
于 2013-01-25T07:56:25.867 回答
0

尝试这个...

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

请参阅此示例

问候。

于 2013-01-23T22:41:38.803 回答