Что поменять в скрипте блока, чтобы он закрывался при нажатии на body, а не id dropdownButton

Question

Не могу сообразить, что нужно поменять в скрипте, чтобы атрибут data-show и класс show пропадали при нажатии на body, а не dropdownButton.

document.addEventListener("DOMContentLoaded", (() = > {
        var e = document.getElementById("dropdownButton"),
                n = document.getElementById("dropdownMenu");
        const i = (0, t.createPopper)(e, n, {
                placement: "bottom-start"
        });
        e.addEventListener("click", (function (t) {
                t.preventDefault(),
                n.hasAttribute("data-show") ? (n.removeAttribute("data-show"), n.classList.remove("show")) : (n.setAttribute("data-show", ""), n.classList.add("show"), i.update())
        }))
}));

Answer 1

Можно предложить нечто такое...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.show {
    display: none;
}
.show.on {
    display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
    const obt = document.querySelector('button')
    obt.addEventListener('click', e => {
        e.stopPropagation()
        const o = document.querySelector('.show')
        o.classList.add('on')
        const ob = document.querySelector('body')
        if (obt.dataset.on) return
        ob.addEventListener('click', test, {once: true})
        obt.dataset.on = 1
        //
        function test(e) {
            o.classList.remove('on')
            delete obt.dataset.on
        }
    })
})
</script>
</head>
<body>
<button>Test</button>
<p class='show'>Text</p>
</body>
</html>

БЛОГ НА HUSL

Что поменять в скрипте блока, чтобы он закрывался при нажатии на body, а не id dropdownButton

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