Как скрыть или открыть меню по нажатию кнопки и скрыть по нажатию вне меню?

Question

[rensly]

как сделать так чтобы по нажатию кнопки активировалась функция которая даёт или убирает класс hide элементу с айди указаным в параметре функции? так-же чтобы меню скрывалось по нажатию вне его.
вот что я пытался сделать:

<a onclick="showDrop('filedrop')">File</a>
<div id="filedrop" class="dropdown hide">

</div>

function showDrop(dropId) {
    let drop = document.getElementById(dropId)
    drop.classList.toggle('hide')
    

    document.addEventListener('mouseup', function(e) {
        if (!drop.contains(e.target)) {
            drop.classList.add('hide')
        } else {
            drop.classList.remove('hide')
        }
});

Answer 1

[Сергей delphinpro]

<a onclick="toggleDrop('filedrop');return false;">File</a>
<div id="filedrop" class="dropdown hide">

</div>

function toggleDrop(dropId) {
    const drop = document.getElementById(dropId)
    drop.classList.toggle('hide', !drop.classList.contains('hide'));
});

Comments

[rensly]

по клику на задний фон не исчезает