CODEWITHSUNDEEP
javascriptjqueryfocusonblur
vytaux
vytaux

Reputation: 2562

Hide list on blur

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();
    }
});

Upvotes: 2

Views: 2767

Answers (3)

Mathias Bynens
Mathias Bynens

Reputation: 149564

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(); 
});

Upvotes: 2

Fabian
Fabian

Reputation: 13691

You can use the document click event. If the user clicks inside the div the event propagation stops there (e.stopPropagation) else it will be handled by the document click event which checks if the menu is open and if it is closes it.

$(document).click(function() { 
  // check if the menu is open, if so close it
});

$("#windowdiv").click(function(e){
  e.stopPropagation();
  // do stuff
});

Upvotes: 1

PetersenDidIt
PetersenDidIt

Reputation: 25620

Check out Ben Alman's "Outside Events" plugin which adds the ability to bind('clickoutside') to handle things like this.

Upvotes: 1

Related Questions