JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<button>Show Menu</button>

<div id="menucontainer">
  <ul id="menu">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
  </ul>
</div>
<p></p>

CSS

.ui-menu { width: 200px; }
#menucontainer { display: none; }

JavaScript

var showMenu = function() {
    $('#menucontainer').show();
    $("#menu").menu({
        select: function (event, ui) {
            $('p').text('Menu selection was ' + ui.item.text());
            $('#menucontainer').hide();
            $('#menu').menu('destroy');
        }
    });
};

$('button').on('click', function() {
    //showMenu(); //Works
    setTimeout(showMenu, 100); //Requires two clicks to close after first time.
});