Как настроить скрытие всплывающего подменю?

Question

[vsdmitry]

На сайте есть такое меню:

<ul id="menu-main">
  <li id="menu-item-01" class="menu-item menu-item-has-children"><a href="">Пункт 1</a>
    <ul class="sub-menu">
	  <li id="menu-item-011" class="menu-item menu-item-011"><a href="">Подпункт 1</a></li>
	  <li id="menu-item-012" class="menu-item menu-item-012"><a href="">Подпункт 2</a></li>
	  <li id="menu-item-013" class="menu-item menu-item-013"><a href="">Подпункт 3</a></li>
    </ul>
  </li>
  <li id="menu-item-02" class="menu-item menu-item-has-children"><a href="">Пункт 2</a>
    <ul class="sub-menu">
	  <li id="menu-item-021" class="menu-item menu-item-021"><a href="">Подпункт 1</a></li>
	  <li id="menu-item-022" class="menu-item menu-item-022"><a href="">Подпункт 2</a></li>
	  <li id="menu-item-023" class="menu-item menu-item-023"><a href="">Подпункт 3</a></li>
    </ul>
  </li>
  ...
</ul>

И скрипт, который открывает всплывающее подменю по клику:

var menu_list = $('#menu-main .menu-item-has-children');
$(menu_list).on('click', function(e) {
  $(this).toggleClass('target');
});

Проблема в том, что всплывающее подменю не закрывается при клике в любом произвольном месте страницы. Пробовал переключать меню через потерю фокуса активного пункта меню, но тогда блокируется переход по ссылке.
Мне нужно либо отслеживать где был произведен клик (по ссылке в меню или в другом месте), либо при вызове функции toggleClass позволять переходить по нажатой ссылке.

Answer 1

[FKV]

Добавь

$(document).on('click', function(e) {
  var menu_list = $('#menu-main .menu-item-has-children');
  if (!$(e.target).closest(menu_list).length)  {
    $(menu_list).removeClass('target');
  }
});

Comments

[vsdmitry]

Помогло. Спасибо