CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John
John

Reputation: 1797

jQuery on hover show sub links on Navigation Menu

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

Upvotes: 0

Views: 954

Answers (6)

Jacek
Jacek

Reputation: 154

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

Upvotes: 0

Chris
Chris

Reputation: 825

In your current setup this should do it

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

Upvotes: 0

Zword
Zword

Reputation: 6793

Use :

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

Fiddle

Upvotes: 2

Goran.it
Goran.it

Reputation: 6299

Try this:

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

Upvotes: 1

markusthoemmes
markusthoemmes

Reputation: 3120

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!

Upvotes: 0

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

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

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

Upvotes: 0

Related Questions