Как сделать, чтобы код скрытия меню работал только при клике вне определенного блока/ов (части меню)?

Question

[Huo Yuhao]

Здравствуйте. Кое-как сделал, чтобы меню скрывался как при нажатии на само меню, так и в других областях, но как-то не получается сделать так, чтобы меню не скрывалось при нажатии на область меню (не считая саму кнопку меню) и его компаньона в виде съезжающей части меню.
Опять же, по задумке меню должен закрываться только при повторном нажатии на иконку меню, либо при нажатии вне его области и "съезжающей" части меню. (в крайнем случае только посл вариант)
Если кто в курсе, хелпаните
здесь небольшая демонстрация

//активация иконки меню при нажатии на него
document.querySelector('.burger').addEventListener('click', function (e) {
    e.preventDefault();
    this.classList.toggle('is-active');
})



//пример из ответов на подобный вопрос
var burger = document.querySelector('.burger');
var MenuItems = document.querySelector('#MenuItems');

const toggleMenu = () => {
  MenuItems.classList.toggle('is-active');
}

burger.addEventListener('click', e => {
  e.stopPropagation();

  toggleMenu();
});

document.addEventListener('click', e => {
  let target = e.target;
  let its_MenuItems = target == MenuItems || MenuItems.contains(target);
  let its_burger = target == burger;
  let MenuItems_is_active = MenuItems.classList.contains('is-active');

  if (!its_MenuItems && !its_burger && MenuItems_is_active) {
    toggleMenu();
  }
})


// отключение анимации иконки меню при клике
$(document).click(function (e) {
    var burger = $(".burger");
    if (burger.has(e.target).length === 0){
        burger.removeClass('is-active');
    }
});
//отключение съезжающей части меню при клике
$(document).click(function (e) {
    var container = $("#MenuItems");
    MenuItems.style.maxHeight = "0px";
    if (container.has.length === 0){
        container.style.maxHeight == "0px";
    }
});

<nav>
                    <ul id="MenuItems">
                        <li><a href="" class="menu-updates">ОБНОВЛЕНИЯ</a></li>
                        <li><a href="../catalog.html" class="menu-catalog">КАТАЛОГ ГЛАВ</a></li>
                    </ul>
                </nav>


<div id="menu" >
                    <button class="burger burger-line" onclick="menutoggle()">
                        <span>Menu</span>
                    </button>
                </div>

также прописан в html:

<script>
        var MenuItems = document.getElementById("MenuItems");

        MenuItems.style.maxHeight = "0px";

        function menutoggle() {
            if (MenuItems.style.maxHeight == "0px") {
                MenuItems.style.maxHeight = "35px";
            } else {
                MenuItems.style.maxHeight = "0px";
            }
        }
    </script>

Answer 1

[Il'ia Kartovitskii]

Это должно тебе помочь:

$(document).mouseup(function (elem) { // Событие клика по элементу, возвращает элемент по которому совершен клик
	if (!$("#id").is(elem.target) && $("#id").has(elem.target).length === 0) { // Проверка на клик, если совершен не по элементу или его дочерним элементам, где id - ид блока по клику на который не должно скрываться
		// Твой код, например $("#id").hide();
	}
});

Comments

[Huo Yuhao]

Спасибо, проверю как смогу.