JSFiddle - React, Tailwind, and code Playground
HTML
<span title='Option' class='optionCont'>Drop Menu</span>
<ul class='dropMenuCont'>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
</ul>
CSS
.dropMenuCont{
display: none;
}
JavaScript
$(".optionCont").live("click", function(e){
var that = this;
$(document).click(function(e){
console.log(e.target);
console.log(that);
if(e.target != that)
{
e.stopPropagation();
e.preventDefault();
$(".dropMenuCont").slideUp();
}
});
if($(this).next().css("display") == "none"){
$(this).next().slideDown();
}else{
$(this).next().slideUp();
}
e.stopPropagation();
e.preventDefault();
});