Как закрыть меню по клику в не его области?

Question

[Pazzetif]

Есть менюшка по дефолту ее не видно

<div class="personal-menu__main ">
                        <a href="#"><img src="/img/ava.svg" alt=""></a>
                        <ul class="personal-menu__list toogle-menu-main">
                            <li>Nickname</li>
                            <li><a href="">Профиль</a></li>
                            <li><a href="">Настройки</a></li>
                            <li><a href="">Выйти</a></li>
                        </ul>
                    </div>

Открывается и закрывается она по клику на "personal-menu__main a"
Вот код открытия/закрытия

$( ".personal-menu__main a" ).click(function() {
    $( '.personal-menu__list' ).toggleClass( "toggle-menu-main" );
});

Как сделать, чтобы она закрывалась по клику в не ее области.

Comments

[Dymok]

Проверять, куда кликнул пользователь с помощью event.target

[Pazzetif]

Dymok, Спасибо, натолкнули на верную мысль)

Answer 1

[Pazzetif]

Может кому пригодится, сделал вот так:

$(document).mouseup(function (e){ // 
    var block = $(".personal-menu__list");
    var block2= $(".personal-menu__main")
    if (!block.is(e.target) 
        && block.has(e.target).length === 0 && !block2.is(e.target)
        && block2.has(e.target).length === 0) {
        block.addClass('toggle-menu-main');
    }
});

Comments

[Interface]

Можно внутри обработчика использовать $(...).closest():

if ($(e.target).closest('селектор того что "внутри" окошка / попапа / менюшки')[0]) {
  // клик внутри
} else {
  // клик снаружи
}