Сворачивание сабменю по клику вне элемента, как модернизировать скрипт?

Question

[error401]

Помогите пожалуйста улучшить скрипт сворачивания\разворачивания сабменю. В данный момент есть менюха, подпункты которой выпадают\сворачиваются при клике на главный(родительский)пункт меню. Т.е. свернуть\развернуть можно только кликнув на "Company".


Нужно сделать, что бы сабменю закрывалось ещё и при клике вне родительского пункта меню.

/*Скрипт выпадения пункта меню*/
$(document).ready(function(e){
      	$('.sub-menu').hide(); //изначально скрываем все открытые субменю
      	$('.drop-menu-item').click(function() { //при клике на ссылку меню (все ссылки в меню имеют этот класc) выполняем функцию
        $('.drop-menu-item').removeClass('active-item'); // что бы при повторном клике сворачивать развернутое меню
        $(this).toggleClass('active-item'); // изменяем стили активного элемента добавив класс
        if ($(this).attr('href') === '#' && $(this).parents('li.no-link').length) {
    	event.preventDefault();
  		}
        $('.sub-menu:visible').slideUp('normal'); //  закатывание открытого меню
        if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) {
        $(this).next().slideDown("normal"); //выкатывание кликнутого меню и закатывание остальных открытых
        }  

      });

  });
/*Скрипт выпадения пункта меню*/

Answer 1

[Воващ]

jQuery(function($){
	$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $("#elem"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		}
	});
});

Comments

[error401]

Простите за ламерские вопросы если что, ваш код работает, но не совсем так, как нужно. Он скрывает целиком блок с меню. Полагаю проблема вот в этом месте:

if (!div.is(e.target) // если клик был не по нашему блоку
        && div.has(e.target).length === 0) { // и не по его дочерним элементам
      div.hide(); // скрываем его

Видимо вот тут вместо div, нужно подставить <a> с классом .drop-menu-item active-item
if (!div.is(e.target)

и вот тут тоже:
&& div.has(e.target).length === 0

А вот тут:

div.hide();

Нужно скрывать не див, а <ul>, с классом .sub-menu

Но я не знаю как это оформить синктаксически верно.
Если вас не затруднит, можете помочь мне подствить правильно указанные мной элементы в ваш код?

[Воващ]

error401, var div = $("#elem");
=> if (!$("#elem").is(e.target) , что значит что elem не является event target
т.е. в том коде 'div' есть переменная

[error401]

Воващ, спасибо большое, разобрался.