Made a simple drop-down menu on jQuery, with a hover on the link, should leave a hidden div:

<a href="#"> Link </a> <div class="dropdown"> Content </div> 

How to choose a div following the link so that the div that goes near the link goes and the script works with an unlimited number of these links?

 $(function() { $('a').hover(function() { $('div').slideToggle(300); }); }); 

And I wanted to ask what event is better to hang the disappearance of this menu?



    1 answer 1

     $(function(){ $('a').hover(function() { $(this).next('.dropdown').slideToggle(300); }); $('.dropdown').bind("mouseout", function(){ $(this).hide(); }); }); 
    • Applied your code, you need to remove slideToggle and apply slideUp / Down, otherwise, when the hoover works, plus closing is not successful because it works only if the cursor enters the container zone, but there may be other elements in the container (for example, links) that will trigger the mouseout for the container . - makregistr
    • It is necessary to check for nesting of elements, you have provided an example in which there are no other elements. Those. when assigning a mouse, you need to check if there is a .dropdown element above, if there is, then not close, if not, close. - Alex Silaev