CODEWITHSUNDEEP
jquery
Dkong
Dkong

Reputation: 2788

Hide an Unordered List on loss of focus with jquery

My Unordered list is hidden by default but appears when the user clicks on the button. The problem is when I move off the unordered list I want the entire thing to hide/disappear. Any ideas?

<script type="text/javascript">

    $(document).ready(function () {
        $('#aboutUsFlyOut').click(function () {
            $('.flyOutMenu').slideToggle('medium');
        });
    });

</script>

<a href="#" style="cursor: pointer;"><img id="aboutUsFlyOut" src="../../button.png" alt="About Us" /></a>        
<ul class="flyOutMenu">
    <li><a href="">menu item 1<a></li>
    <li><a href="">menu item 2</a></li> 
    <li><a href="">menu item 3</a></li> 
    <li><a href="">menu item 4</a></li> 
</ul>

Upvotes: 0

Views: 333

Answers (2)

Nope
Nope

Reputation: 22339

The problem is when I move off the unordered list I want the entire thing to hide/disappear.

You can attach a mouseleave event to the ul and toggle it back up again:

$(document).ready(function() {
    $('#aboutUsFlyOut').click(function() {
        $('.flyOutMenu').slideToggle('medium');
    });

    $('ul.flyOutMenu').on('mouseleave', function(){
        $(this).slideToggle('medium');
    });
});​

DEMO - hide list on mouseleave

In response to Juan Mendes's comment I added a variation which waits 2 seconds before hiding it again in case the user hovers back over it with the mouse.

$(document).ready(function() {
    var mouseHasEntered = false;

    $('#aboutUsFlyOut').click(function() {
        $('.flyOutMenu').slideToggle('medium');
    });

    $('ul.flyOutMenu').on('mouseenter', function() {
        mouseHasEntered = true;
    });

    $('ul.flyOutMenu').on('mouseleave', function() {
        var $list = $(this);

        mouseHasEntered = false;

        setTimeout(function() {
            if (!mouseHasEntered) {
                $list.slideToggle('medium');

                // or use $list.hide() if you don't want it to animate.
            }
        }, 2000);
    });
});​

DEMO - hide list on mouseleave with a delay in case mouse re-enters

Upvotes: 1

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

You can bind the mouseout and hide the menu if it is visible:

var menu = $('.flyOutMenu');
$('#aboutUsFlyOut').on('click', function () {
    menu.slideToggle('medium');
}).on('mouseout', function(){
    if(menu.is(':visible')
        menu.slideToggle('medium');
});

You may need to add some more checks to make sure the menu is not currently animating.

Upvotes: 0

Related Questions