Вход

Просмотр полной версии : Скрытие блока по клику вне его

Ubivectel
29.08.2022, 17:45
Привет мир.

Имеем кнопочку:

<div id="kide-menu" class="kide-menu-icon"><i id="bar" class="fa fa-ellipsis-v" aria-hidden="true"></i></div>

при клике на которую срабатывает скрипт:

let kideMenu = document.querySelector('.kide-menu');
let kideMenuIcon = document.querySelector('#kide-menu');
kideMenuIcon.addEventListener('click', kideMenuIconClick);

function kideMenuIconClick() {
kideMenu.classList.toggle('show-menu');
}

и отображается / скрывается меню:

<div class="kide-menu">
меню
</div>

очень бы хотелось скрывать его по клику вне его.
Нашел такой скрипт:

const box = document.querySelector('.kide-menu');
document.addEventListener('click', (e) => {
const click = e.composedPath().includes(box);
if (!click) {
kideMenu.classList.remove('show-menu');
}
});

Вот только теперь при клике на "kide-menu" срабатывает и событие на "document".
Не соображу как добавить в исключения <div id="kide-menu" class="kide-menu-icon"><i id="bar" class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
:help:
рони
29.08.2022, 18:08
Ubivectel,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#kide-menu {
width: 80px;
height: 24px;
background-color: #0000FF;
text-align: center;
}
#kide-menu:after {
content: "click me";
color: #FFFFFF;
}
.kide-menu {
display: none;
}
.kide-menu.show-menu {
display: block;
}
</style>
<script>
document.addEventListener('click', ({
target
}) => {
if (target.closest(".kide-menu")) return;
const kideMenu = document.querySelector('.kide-menu');
if (target.closest("#kide-menu")) kideMenu.classList.toggle("show-menu");
else kideMenu.classList.remove("show-menu");
})
</script>
</head>
<body>
<div id="kide-menu" class="kide-menu-icon"><i id="bar" class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
<div class="kide-menu">
меню
</div>
</body>
</html>
рони
29.08.2022, 18:15
Нашел такой скрипт:
:)
https://javascript.ru/forum/dom-window/80550-skrytie-menyu-pri-shhelchke-v-lyubom-meste-ehkrana.html#post526117

https://javascript.ru/forum/dom-window/69553-izmenit-povedenie-knopki-po-kliku.html#post459845

https://javascript.ru/forum/misc/75489-zakrytie-menyu-pri-klike-vne.html#post496299

https://javascript.ru/forum/css-html/75166-skrytie-diva-pri-klike-vne-ego.html#post494297
Ubivectel
29.08.2022, 20:36
Спасибо рони, пошел курить матчасть :victory: