JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:;" class="mostrarMenu">Mostrar menu</a>
<div id="maisOpcaoMenu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>

CSS

div#maisOpcaoMenu {
    display: none;
}

JavaScript

$("a.mostrarMenu").bind('click',function(e){
    $("div#maisOpcaoMenu").show('fast');
    $(document).one("click", function() { //Oque devo colocar aqui?
          $("div#maisOpcaoMenu").hide('fast');

    });
    e.stopPropagation();
})