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