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

Question

[L1nw0od]

Здравствуйте, использую меню - все работает хорошо (решение нашел в интернете), но хочу сделать штуку чтоб на любой области экрана оно закрывалось, как это внедрить в этот код без понятия (
Нужно чтоб не скрывалось хайдом а при клике на любую область удалялся клас опен и все ставало на свое место.

<script>
        $(function() {
            $('.ui-nav').tooltip();
        });
        $(document).ready(function() {
            $(".nav__left a.ui-head").click(function(e) {
                e.preventDefault();
                if (!($(this).parent(".ui-outer").hasClass("open"))) {
                    $(this).parent(".ui-outer").addClass("open").animate({
                        "width": "350px"
                    }); //Expands outer block
                    $(this).parent(".ui-outer").find("a > span").animate({
                        "opacity": "1"
                    }); //Display Headings
                } else {
                    $(this).parent(".ui-outer").removeClass("open").animate({
                        "width": "116px"
                    }); //Reduces outer block
                    $(this).parent(".ui-outer").find("a > span").animate({
                        "opacity": "0"
                    }); //Hide Headings
                }
                if (!($(this).parent(".ui-outer").hasClass("open"))) {
                    $(this).parent(".ui-outer").removeClass("open").animate({
                        "width": "116px"
                    }); //Reduces outer block
                }
            });
        });
    </script>

Comments

[FeST1VaL]

не в этот код) По сути мы отслеживаем каждый клик сделанный по странице, если мы килкаем в области меню, то ничего не делаем иначе убираем класс opened и скрываем меню, в моем случае строку поиска. Просто без структуры HTML я не могу под ваш случай переделать, но тут достаточно все просто

$(document).click(function(e){
	if($('.search__form').length) {
		if ($(e.target).closest('.search__form').length) return;
		if ($(e.target).closest('.search__box').length) return;

		$('.search').finish().removeClass('opened').fadeOut(300);
		$('.search-results__container').finish().fadeOut(300);
	}

	e.stopPropagation();
});

Answer 1

[Lord_Dantes]

Обычно использую затемнение в качестве выделения меню, я так делаю по крайней мере. И далее уже затемнение выставляем допустим з-индекс 100 а меню з-индекс 200. И делаем клик на затемнение и убираем меню и все.

Comments

[L1nw0od]

я понимаю, но тут мне нужно другое (

[Rustam Bainazarov]

L1nw0od, да по сути то же самое. Просто фон у этого блока у вас будет полностью прозрачный :))

[L1nw0od]

Рустам Байназаров, задача чтоит в том куске кола это реализовать

Answer 2

[Михаил]

document.addEventListener('click', onDocumentClick);

function onDocumentClick(e) {
  const menu = элемент меню; //

  let parent = e.target;
  let inMenu = false;

  while (parent) {
    if (parent === menu) {
      inMenu = true;
      break;
    }

    parent = parent.parentElement;
  }

  if (!inMenu) {
    // hide()
  }
}

Comments

[L1nw0od]

Могли бы как то этот кусок прокомментировать, что он делает и для чего он, и куда его вставлять ?

[Михаил]

L1nw0od, При открытии менюшки, вы вешаете click событие на document,
В самом событии вы беретё конкретный элемент по которому кликнули (самый вложенный)
Проходитесь по цепочке его родителей и их родителей, и если 1 из них, это элемент меню, который вы открываете, тогда вы кликнули внутри менюшки, и её закрывать не нужно,
Но если при клике в цепочке родителей нет вашего меню, значит вы кликнули где-то вне его, и его нужно закрыть

[Михаил]

L1nw0od, и при закрытии это событие надо убирать