Question

I am new to jQuery and am not sure how to solve this jQuery dropdown problem I am having.

When you hover over one of the links, the dropdown menu works fine, however I have added a second dropdown to the navigation, and now when you hover one of the links, both the dropdowns are revealed. I only want the current dropdown menu to be revealed.

Here is my code, and a link to jsfiddle http://jsfiddle.net/K2Zzh/1/…

$('.dropdown ul').hide();   
$('.dropdown').hover(function(){
    $('.dropdown ul').stop().slideDown(500);
    },function(){
    $('.dropdown ul').stop().slideUp(200);
});

I know why it is doing what it is doing, and I know I should be using a this somewhere but I am not sure where.

Answer 1

You need to only target the relevant list, similar to this:

var $dropdown;

$('.dropdown ul').hide();
$('.dropdown').hover(function() {
    $dropdown = $(this).find('ul');
    $dropdown.stop().slideDown(500);
}, function() {
    $dropdown.stop().slideUp(200);
});​

DEMO

The only reason why I’m using a variable above is so you don’t have to traverse twice for the same dropdown, which is a good habit to get into.

You can off course do this too:

$('.dropdown ul').hide();
$('.dropdown').hover(function() {
    $(this).find('ul').stop().slideDown(500);
}, function() {
    $(this).find('ul').stop().slideUp(200);
});​

Also, the reason I used find() instead of children() is because children() only travels a single level down the DOM tree while find() can traverse down multiple levels to select descendant elements.

In your particular case childrend() seems absolutly fine though as you are only 1 level down.

Edit
For completeness sake, if you want to use slideToggle() within a single hover function you can do as seen in another answer:

$('.dropdown').hover(function() {
    $(this).find('ul').stop(true, true).slideToggle(500);
}

Note though that when using this option you might need to include true, true in your stop() call to prevent the sliding menu from lagging and possibly becoming reversed.

• clearQueueA Boolean indicating whether to remove queued animation as
  well. Defaults to false.
• jumpToEndA Boolean indicating whether to
  complete the current animation immediately. Defaults to false.