JQuery drop down, remain down while hover over drop down

Question

I setup a jquery dropdown menu that works perfect. It drops down when a user rolls over a link. The problem is that when the user rolls over the content area of the drop down menu, it slides back up. I need to set up the code so that the slidedown box remains in the down position while the user's cursor is still over it.

Here is my HTML:

<ul id="tabnav"> 
<li class="tab2"><a href="index2.html" class="btn-slide">My Leases</a></li> 
</ul>   

<div id="leases"> 
<!-- slide down content here --> 
</div>

JS Trigger:

<script type="text/javascript"> 
$(document).ready(function(){
  $(".btn-slide").hover(function(){
    $("#leases").slideToggle("medium");
    $(this).toggleClass("active"); 
    return false;
  });
});
</script>

Any ideas?

EDIT: Here is a link to page in question: http://designvillain.com/testbed/600/601.html

Answer 1

The .hover() binds two events, mouseenter and mouseleave.

I would instead go granular and use the mouseenter() on the .btn-slide and the mouseleave() on the .leases

$(function()
{    
    $(".btn-slide").mouseenter(function(){ 
        $("#leases").slideToggle("medium"); 
        $(this).toggleClass("active");
    });
    $("#leases").mouseleave(function(){
      $(".btn-slide").toggleClass("active");
      $(this).slideToggle("medium"); 
    });
});

EDIT: Note, if the mouse never enters the #leases div, it will not get the mouseleave, and you may need to consider that.

EDIT2: fix my bad finger typing of funciton to function

Answer 2

I assume the div is hidden on page load and you want it to show when you hover over the link? Change toggle to down...

$(document).ready(function(){
$("#leases").hide();
$(".btn-slide").hover(function(){
    $("#leases").slideDown("medium");
    $(this).toggleClass("active"); 
return false;
});
});

Does it need to slide back up sometime?

Answer 3

I'm not sure if this is what you want, but I'll just drop it here. It waits 500ms before sliding up #leases, and only when appropriate

var isMousedOver;

var hideDropdown = function(a) {
        setTimeout( function() {
            if (isMousedOver) return;
            $("#leases").slideUp("medium");
            $(a).removeClass("active");
        }, 500);
}

$(".btn-slide").hover(
    function(){
        $("#leases").stop(true,true).slideDown("medium");
        isMousedOver = true;
        $(".btn-slide").removeClass("active");
        $(this).addClass("active");
        var that = this;
        $("#leases").data("mouseoutfn", function() { hideDropdown(that) });
    },
    function(){
        isMousedOver = false;
        hideDropdown(this);
    }
);

$("#leases").hover(
    function() {
        isMousedOver = true;
    },
    function() {
        isMousedOver = false;
        $(this).data("mouseoutfn")();
    }
);

Here's a demo: http://jsfiddle.net/mMRZc/