悬停时的jQuery在导航菜单上显示子链接

Question

I have a navigation menu, when i hover over the links i want to show each links sub menu then toggle or hide and show each individual one.

At the moment when I hover over the link on the navigation menu it displays all the sub menus for all the links.

I have attached a fiddle with a demo of my code so far: -

http://jsfiddle.net/QTm2c/1/

Here is the jQuery

$(document).ready(function() {
    $("li.navmain__item").hover(function () {
            $("span.navmain__item--subnavholder").toggle();
        })
})

Thanks

Answer 1

Use :

$(document).ready(function() {
    $("li.navmain__item").hover(function () {
        $(this).children("span.navmain__item--subnavholder").toggle();
    });
});

Fiddle

Answer 2

Try this:

$(document).ready(function() {
    $("li.navmain__item a").hover(function () {
        $(this).siblings().toggle();
    })
})

Answer 3

You have to target the specific submenu. Inside the hover() handler, use:

$("span.navmain__item--subnavholder", this.parentElement).toggle();

Answer 4

You just have to get the subnavholder for the element you're hovering. In the callback, the element you're hovering over is stored in this (as an HTML Element).

Changing

$("span.navmain__item--subnavholder").toggle();

to

$(this).parent().find("span.navmain__item--subnavholder").toggle();

Will do the trick!

Answer 5

In your current setup this should do it

$(document).ready(function() {
            $("li.navmain__item").hover(function () {
                $(this).find(".navmain__item--subnavholder").toggle();
            })
        })

Answer 6

You could also add indexing to the script. Here is edited, working jssfiddle: http://jsfiddle.net/QTm2c/8/

$(document).ready(function() {
        $("li.navmain__item a").hover(function () {
            var index = $( "li.navmain__item a" ).index( this );
            $("span.navmain__item--subnavholder"+index).toggle();
        })
    })