jQuery: hover link show/hide div

Question

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.

Hmm, the second part of you post means nothing to me. I'd suggest starting simple. If you want to do _something_ on the mouseevent event, I'd focus on that first. You can use the selector $("a.menuItem") to match links with the menuItem link. Write a jQuery snippet that does that and simply uses console.log to note when you mouseover. — Raymond Camden, Jan 23 '13 at 22:27

score 1 · Answer 1 · edited May 23 '17 at 10:27

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:

Yeah, I thought of that, but my css-files are already a bit messy. Short of time. Thanks for your help! — user2005500, Jan 24 '13 at 21:49

dmgig · Answer 2 · 2013-01-23T22:39:09.387

A few things I see:

in your anchor link, you need quotes around your id value ( id="815" instead of id=815 )
You need to put the jQuery $ around your selector if you want to put them inside a variable and reuse them just by calling that variable ( menu[i] = $("#"+j[i]); )
I don't know where your rubrik[i] is coming from, but if you are trying to call an element based on it's position in the dom, you need to use the ":eq(x)" selector. Like if you want to grab the 3rd element with the class HoverTopSubMenuBlock, you can grab it with $(".HoverTopSubMenuBlock:eq(3)")

But if I were you, I would just do:

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

I think that would do it without all the loops and stuff.

Thank you! Eventually I figured it out. – user2005500 Jan 24 '13 at 21:48 — user2005500, Jan 24 '13 at 21:48

MG_Bautista · Answer 3 · 2013-01-23T22:50:06.023

0

Try this...

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

See this Example

Greetings.

edited Jan 23 '13 at 22:50

answered Jan 23 '13 at 22:41

MG_Bautista

2,593
2
18
33

`.toggle()` is now depreciated and removed form 1.9 – ROY Finley Jan 23 '13 at 22:43
@ROYFinley That's toggle event method, not this method. – Ram Jan 24 '13 at 02:46
Thanks! Figured out exactly that solution all myself. :-) Thanks for your help! – user2005500 Jan 24 '13 at 21:46
@user2005500 - You should post your solution as an answer and accept it so others can see that your problem was solved, especially if you solved it yourself :) – 3dgoo Jan 24 '13 at 22:19

score 0 · Answer 4 · answered Jan 25 '13 at 07:56

Thanks for all the help!

Thought I would get an email notification once my question got answered so I countinued trying, and got to the solution. Ended up with almost the same code as MG_Bautista suggested.

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

jQuery: hover link show/hide div

4 Answers4