Закрытие элемента по клику вне его области - jquery

Question

Есть скрипт загрузки кода самого меню в уже созданный блок .avatar-menu-box. + есть отображение этого блока при нажатии на определенную кнопку .avatar-menu при помощи класса .avatar-show котором прописано для меню display: block Как в моем случае сделать закрытие элемента по клику вне его области?

$('.avatar-menu').on('click', function () {
   $('.avatar-menu-box').load('frend');
   $(this).parent().parent().toggleClass('avatar-show');
});

Answer 1

Если я правильно понял что нужно сделать, то можно сделать, что бы меню закрывалось по клику на любое место, кроме самого меню и кнопки. Тогда можно использовать event.stopPropagation(). https://api.jquery.com/event.stoppropagation/

Например

$(document).click(function(){
     скрываем меню
})

$(document).on('click', '.avatar-menu, .avatar-menu-box', function(event){
      //предотвращаем скрытие меню, по нажатии на кнопку и на само меню
      event.stopPropagation();
})

Answer 2

Спасибо пользователю Maxim

Готовый код выглядит вот так:

$('.avatar-menu').on('click', function () {
   $('.avatar-menu-box').load('frend');
   $(this).parent().parent().toggleClass('avatar-show');
});
// ниже, новый рабочий код
$(document).on('click', function () {
   $('.avatar-menu').parent().parent().removeClass('avatar-show');
});
$(document).on('click', '.avatar-menu, .avatar-menu-box', function(event){
   //предотвращаем скрытие меню, по нажатии на кнопку и на само меню
   event.stopPropagation();
});

БЛОГ НА HUSL

Закрытие элемента по клику вне его области - jquery

Ответы (2 шт):