Как подправить код, чтобы выпадающее меню корректно открывалось?

Проблема в том, что при открытии выпадающего меню и последующим его закрытием через нажатие по любой точке экрана необходимо дважды нажимать по меню чтобы его открыть. Если добавить переменные в код закрытия через нажатие на document, то выпадающее меню будет невозможно открыть (оно будет открываться и закрываться). Что тут надо сделать, есть какие-то более качественные способы сделать выпадающее меню?

 $("#games").click(function(){

    if(!games){
    
        $("#games-menu").slideDown();
    
    } else {
    
        $("#games-menu").slideUp();
    
    } games=!games;

});
            
$("#support").click(function(){

    if(!support){
    
        $("#support-menu").slideDown();
    
    } else {
    
        $("#support-menu").slideUp();
    
    } support=!support;

});

$("#language").click(function(){

    if(!language){
    
        $("#language-menu").slideDown();
    
    } else {
    
        $("#language-menu").slideUp();
    
    } language=!language;

});

$(document).mouseup(function (e) {
    
    if ($("#games-menu").has(e.target).length === 0){
        $("#games-menu").slideUp();
    }
    
    if ($("#support-menu").has(e.target).length === 0){
        $("#support-menu").slideUp();
    }
    
    if ($("#language-menu").has(e.target).length === 0){
        $("#language-menu").slideUp();
    }
    
});