CODEWITHSUNDEEP
javascriptjquerycss
JohnDoo
JohnDoo

Reputation: 103

How to show only the first by hover with jQuery?

if i make a hover over my menulinks currently all submenues which are on the first level will be shown i dont know whats wrong, see my code:

    $('#menu li').hover(function () {
        //show its submenu
        $('ul', this).slideDown(100);

    }, function () {
        //hide its submenu
        $('ul', this).slideUp(100);
    });

so in my opinion it must work very well because a hover over a link should only display this first submenu. But also the submenu of this first link will show directly by a hover and i dont know how to fix it better than yet.

need some help please.

For a better understanging i hve created a fiddle here.

Upvotes: 2

Views: 236

Answers (4)

Gabe
Gabe

Reputation: 330

You need to specify the list you want to show. Use $(this) as context to find the <ul> inside, and then filter the result with the :first pseudo-selector.

Try something like this for both hoverIn and hoverOut events:

$("#menu").on('hover', 'li', function(e){
    // $(this) refers to the <li> being hovered
    $(this).find('ul:first').slideToggle(100);
});

See the docs for on() and slideToggle() methods.

Upvotes: 0

Ankit Khedekar
Ankit Khedekar

Reputation: 924

you should separate the ul for different levels of submenu using different class for different levels of menus.

if you want to just change your code you might want to try this change:

//show its submenu
$('ul', this).eq(0).slideDown(100);

Upvotes: 0

Vince
Vince

Reputation: 1527

The <ul> which is holding your submenus also contains the sub-submenus. So if you display the first list, it automatically also shows all elements contained in that list.

Upvotes: 0

colestrode
colestrode

Reputation: 10658

Your selector in your hover functions are finding all ul elements that are descendants of the li element. You want to show only direct children. Try this instead:

$('#menu li').hover(function() {
    //show its submenu
    $(this).children('ul').slideDown(100);

}, function() {
    //hide its submenu
    $(this).children('ul').slideUp(100);
});

Upvotes: 7

Related Questions