JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-toggle">Close</div>
<ul class="menu showed">
    <li>Blah blah blah</li>
</ul>

CSS

.menu {
    min-height: 100px;
    width: 100px;
    background-color: yellow;
}

.showed {
    display: block;
}

.hidden {
    display: none;
}

JavaScript

var toggleButton = $('.menu-toggle'),
timerDelay;
toggleButton.on("click", function() {
    var elem = $(this),
    menu = elem.siblings('ul'),
    parent = elem.parent(),
    parentParent = parent.parent(),
    pageH = $(window).height();
    elem.toggleClass('pressed');
    menu.stop(true);
    clearTimeout(timerDelay);
    if (menu.is('.scrollable')) {
        menu.css({"max-height": pageH - 80});
    }
    parent.toggleClass('showed');
    if (menu.is('.parent')) {
        parentParent.toggleClass('showed');
    }
    if (menu.is('.hidden')) {
        menu.css({"height": "100%", "padding": 5}).toggleClass('hidden showed');
    } else {
        menu.toggleClass('hidden showed');
        if (menu.is('.nodelay')) {
            menu.css({"height": 0, "padding": ""});
        } else {
            timerDelay = setTimeout(function() {
                menu.css({"height": 0, "padding": ""});
            }, 450);
        }
    }
});

$('.menu, .menu-toggle').on('click', function(e) {
    e.stopPropagation();
});

$('body').on('click', function(e) {
    if($('.menu').hasClass('showed')){
        //code to hide menu 
        // i have clicked the toggle button here since the logic to hide menu is not separate in your code
        toggleButton.click();
    }
});