仅限子元素上的jQuery slideDown（）

Question

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/ *

Answer 1

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');

Answer 2

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