rensly
@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')
        }
});
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
rensly
@rensly Автор вопроса
кому интересен ответ (сам додумался):
function showDrop(dropId, btnId) {
    const drop = document.getElementById(dropId)
    const dropBtn = document.getElementById(btnId)
    drop.classList.toggle('hide');


    document.addEventListener('click', function (e) {
        if (!drop.contains(e.target) && !dropBtn.contains(e.target)) {
            drop.classList.add('hide');
        }
    });
}

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

<div>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
<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'));
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы