basic problem in jQuery code

http://jsfiddle.net/nhmbA/

In above link you'll find my working code. The issue is when you first click on Select For button, it'll show a list but again you click on the sa开发者_JAVA百科me button then the list should not be visible but its vice-versa.

I know, this is due to blur event applied to the list but I also want the list to be hidden when its clicked outside.

Help me to sort this minor issue..

In your code change

$('.tglrOptns').blur(function(){
    $(this).css('display', 'none').siblings('.optnTglr:first').removeClass('seltd');
});

to

$('body').click(function(e){

    $('.tglrOptns').css('display', 'none')
     .siblings('.optnTglr:first').removeClass('seltd');

});

and add this

$('.tglrOptns').click(function(e){
e.stopPropagation();
});

Demo

I have added a close label, on clicking it closes the options div

hi if you change the on click function

to: $('.optnTglr').live('click', function(e){

this should help