Закрытие меню при клике вне js?

Question

[Serqwezxc]

Пытаюсь закрывать меню при клике вне. Но меню закрывается при клике на дочерние элементы, то-есть отрабатывает только обёртка (div class="mobile-panel")

<div class="mobile-panel">
        <ul class="mobile__list">
            <li class="mobile__item"><a href="#section-2" class="menu__link"><span data-hover="about&nbsp;us">about us</span></a></li>
            <li class="mobile__item"><a href="#section-4" class="menu__link"><span data-hover="products">products</span></a></li>
            <li class="mobile__item"><a href="#section-3" class="menu__link"><span data-hover="services">services</span></a></li>
            <li class="mobile__item"><a href="#section-5" class="menu__link"><span data-hover="our&nbsp;team">our team</span></a></li>
            <li class="mobile__item"><a href="#section-6" class="menu__link"><span data-hover="blog">blog</span></a></li>
            <li class="mobile__item"><a href="#section-7" class="menu__link"><span data-hover="contact">contact</span></a></li>
        </ul>
        <div class="mobile__social">
            <div class="social__title">let’s get social!</div>
            <div class="social__box">
                <a href="#" class="social__icon icon-facebook"></a>
                <a href="#" class="social__icon icon-linkedin"></a>
                <a href="#" class="social__icon icon-instagram"></a>
                <a href="#" class="social__icon icon-twitter"></a>
            </div>
        </div>
    </div>

window.addEventListener('mouseup', function (e) {
   const menu = document.querySelector('.mobile-panel')
   const menuItem = menu.childNodes
   if (e.target != menu && e.target != menuItem) {
      document.body.classList.remove('-show')
   }
})

Comments

[Сергей Сергей]

ссылки внутри меню не находятся внутри списка menu.childNodes, нужна дополнительная проверка.

[Serqwezxc]

Сергей Сергей, отдельно еще на __list и __social?

[Сергей Сергей]

Да. Но это всё можно обобщить через рекурсивный поиск родителя.

[Serqwezxc]

Сергей Сергей, а как это сделать?

Answer 1

[Сергей Соколов]

По идее, любой же клик вне должен закрывать?
Можно выставлять какую-то переменную флагом состояния меню: открыто / закрыто.
При открытии начинать слушать на корневом document событие "click" или "mousedown".

При клике смотреть, содержится ли цель клика где-то под div.mobile-panel через однократный вызов Node.contains() (он смотрит сразу на любую глубину). Если внутри – не прятать, если снаружи – закрывать меню.

const menuRoot = document.querySelector('div.mobile-panel');
document.addEventListener('mousedown', (e) => {
   if (! menuRoot.contains(e.target)) {
      document.body.classList.remove('-show')
   }
})

Comments

[Serqwezxc]

большое спасибо