'jQuery-Keep slidedown DIV visible if mouseover it

I have a link (BTN-SLIDE) that, when clicked (and not when hovered), slides down another DIV (called PANEL), something like a dropdown menu.

I want to make sure the dropdown DIV fades out when: a) The mouse leaves the link b) the mouse leaves the dropdown DIV

But I also want the dropdown DIV to stay visible while mouse is over it.

This is the code I have. The problem is that when I click to open the dropdown DIV (#panel) and leave the link (.btn-slide) without mouseovering the #panel, then the #panel will never close.

On the other hand if I set the #panel to close on mouseleaving the link, then the #panel will close even if I'm mouseovering it.

Any solution? Thanks!

<a class="btn-slide" href="#”>Click here to open Panel</a>    
<div id="panel"><p>ahsjdhkashdkasjhd</p></div>

$(".btn-slide").click(function(){
  $("#panel").slideDown(500);
});

     $("#panel").mouseleave(function(){
        $("#panel").slideUp(500);
});
jquerydrop-down-menumouseovermouseentermouseleave


Solution 1:[1]

You can wrap both elements in a parent element and get the mouseleave trigger from that. http://jsfiddle.net/UCrQF/

Solution 2:[2]

A clean solution can be made by stopping the event aggregation in the mouse over function of the drop down content.

function topMenuSetup(){
  $(".top-nav-dropbtn").hover(
    function() {
        $(this).next().stop(true, true).slideDown('medium');
    },
    function() {
        $(this).next().stop(true, true).slideUp('medium');
    });

    $(".top-nav-dropdown-content").hover(
      function() {
          $(this).stop(true, false);
      },
      function() {
          $(this).stop(true, true).slideUp('medium');
      });
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Justice Erolin
Solution 2

Related Questions