jQuery - How do I make the menu fadeout when the user clicks anywhere else in the document besides the menu itself?
- by GirlGoneMad
Hi,
I have a link that functions similar to a drop down menu in that it fades in a list of links below it when clicked. Currently, the list fades back out when the link is clicked again, but I'd like for it to also fade out if the user clicks elsewhere on the page. I'm not sure how to add the $(document).click(function()... that handles this, or if this is even the right approach. Here is my code:
$('#show_button').click( function(){
if(!$('#list').is(':visible')){
var pos = $('#show_button').offset();
$('#list').css({'left':pos.left - 11, 'top': pos.top+14}).fadeIn();
}
else{
$('#list').fadeOut();
}
});
I am trying to add something like this to make the list fade out when the user clicks anywhere else in the page:
if($('#list').is(':visible')){
$(document).click(function() {
$('#list').fadeOut();
});
}
Thanks in advance - I would appreciate any help on this one :)
