Question

If I want to mouseenter a div, an element will show, then when mouseleave, element disappears.

I have a click function inside the mouseenter so theres a drop down menu when clicked.

I want the dropdown menu and the element to stay active even when mouseleaves. So I want mouseleaves to not be applicable in this situation, when there’s a click event. User will have to click on the element again or anywhere on the page to make the element and dropdownmenu disappear.

But I want to keep mouseleave function working so if user mouseenters a div, the element will show and they can click on it again.

I currently have something like this, but I just dont know how to make the mouseleave to not be applicable when clicked

$(".div").mouseenter(function(){
        $(".element",this).show();
        $(".element").click(function(){
            $(".dropdown").show();
            return false;
        });
    }).mouseleave(function(){
        $(".element",this).hide();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='div'>
       <div class='element' style='display:none;'>
          boxed element
       </div>
       <div class='dropdown' style='display:none;'>
          menu
       </div>
    </div>

Answer 1

You can set a custom attribute for marking the item as clicked. The mouseleave event handler can check the value of this custom attribute before hiding the element.

i.e. Something like:

$(".div").mouseenter(function(){
    $(".element",this).show();
    $(".element").click(function(){
        $(".dropdown").show();

        // set custom attribute for marking this one as clicked
        $(this).attr('clicked', 'yes'); 

        return false;
    });
}).mouseleave(function(){

    // check custom attribute before hiding the element
    if($(this).attr('clicked') != 'yes') {
        $(".element",this).hide();
    }

});