На сколько вы все знаете, в DOM события распространяются по принципу пузырька — события передается от дочернего к родительскому, до самых до окраин. То есть, любой клик в пределах документа отразится на корневом элементе body.
То есть, берем и попросту сделаем скрытие меню, если событие клика пришло к нему.
$('body').click(function() { // Скрыть меню });
Но, если кликнем на наше меню, то ничего подобного происходить не должно. То есть, дальше контейнера с меню данные события распространятся не должны.
$('#menuContainer').click(function(event){ // Клик оказался в пределах? // Распространению — нет! event.stopPropagation(); });
Добавлю еще один вариант, которым я пользовался ранее. Принцип действия — проверка родителей элемента перебором, на наличие в нем «знакомых».
$(document).click(function(e) { if ($(e.target).parents().filter('#menuContainer').length != 1) { $('#menuContainer').hide(); } });