Question

I am trying to build a basic drop down menu with jquery. I have one button inside the top nav that when a user hover, a div will slide down below it. Here is the code I have so far:

<script>

$('.rentals-link').mouseenter(function() {
  $('.region-drop-down-menu').slideDown();
});

$('.region-drop-down-menu').hover(function() {
  $('.region-drop-down-menu').slideDown();
});

$('.region-drop-down-menu').mouseleave(function() {
  $('.region-drop-down-menu').slideUp();
});


</script>

The problem with the code though is that I can not figure out how to make the div slide up when the mouse leaves the button area AND also have it slide up when leaving the div area. Any suggestions?

Answer 1

Maybe do

<div class="dropdown-menu-toggle">Toggle</div>
<div class="dropdown-menu-content">...</div>

and

var isInDropDown = false, isInToggle = false;
$('.dropdown-menu-toggle').mouseenter(function() {
    $('.dropdown-menu-content').slideDown();
    isInToggle = true;
}).mouseleave(function() {
    setTimeout(function() {
        if(! isInDropDown) {
            $('.dropdown-menu-content').slideUp();
        }
    }, 1000);
    isInToggle = false;
});
$('.dropdown-menu-content').mouseenter(function() {
    $('.dropdown-menu-content').slideDown();
    isInDropDown = true;
}).mouseleave(function() {
    setTimeout(function() {
        if(! isInToggle) {
            $('.dropdown-menu-content').slideUp();
        }
    }, 1000);
    isInDropDown = false;
});

So both elements check whether the mousepointer is inside of the other one before closing. Also this gives the user some time to move the cursor (1 second). My jsfiddle fork: http://jsfiddle.net/zkRq2/