Hide list on blur

Question

I have a list showing up when I click on button, the problem is that I want to hide the list whenever it loses focus i.e. user clicks anywhere on a page, but not on that list. How can I do this? Also, you can see how it should look at last.fm, where's list of profile settings (li.profileItem). (ul.del li ul by default is display:none) Basic list structure:

<ul class='del'>
    <li>
        <button class='deletePage'></button>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

My function for displaying this list:

$(".deletePage").click(function(){
    if( $(this).siblings(0).css("display") == "block" ){
        $(this).siblings(0).hide();
    } else {
        $(this).siblings(0).show();
    }
});

Answer 1

See How to detect a click outside an element?

You can bind a click handler to the document to hide the list, then attach a separate handler to the button which calls event.stopPropagation.

$(document).click(function() {
 $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
 event.stopPropagation();
});

Alternatively, you could use the jQuery outside events plugin:

$('.show-list-button').bind('clickoutside', function() {
 $('.list-to-hide').hide(); 
});