CODEWITHSUNDEEP
javascriptjquery
Brian
Brian

Reputation: 3958

jQuery slideDown() on child elements only

forgive me in advance, I ride the javascript short bus :(

I have the following code for a slideDown() / slideUp() with jQuery on a primary navigation:

//jQuery slideDown for menu dropdowns
$('.menu').addClass('js-enabled')

$('.js-enabled li').hoverIntent(function () {
   $(".sub-menu").slideDown('slow');
 }, 
 function () {
   $(".sub-menu").slideUp('slow');
});

My problem is that the code is not unique to the .sub-menu's which are children of a given <li> ... Can someone tell me how to make the above code specific to the <li> element being hovered according to the original $('.js-enabled li').hoverIntent target?

*EDIT : Here is the production site, demonstrating the bug where all ".sub-menu"'s are being animated by the effect: http://valeriaentertainment.com.s66112.gridserver.com/ *

Upvotes: 2

Views: 1677

Answers (2)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263077

You can pass the current <li> element as the context argument of the $() function:

$(".js-enabled li").hoverIntent(function() {
   $(".sub-menu", this).slideDown("slow");
}, function() {
   $(".sub-menu", this).slideUp("slow");
});

Upvotes: 3

Felix Kling
Felix Kling

Reputation: 816930

I assume inside the handler you can reference the current element with this. Then you can use .find() to search for certain descendants:

$(this).find(".sub-menu").slideDown('slow');

Upvotes: 3

Related Questions