JSFiddle - React, Tailwind, and code Playground
HTML
<div class="menuButton">
Menu Button
</div>
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Something</a></li>
</ul>
</div>
CSS
.menuButton {
display:block;
cursor:pointer;
}
.navmenu {
display:none;
}
.navmenu.active {
display:block;
}
JavaScript
$(document).ready(function() {
var removeClassVar = true;
$('.menuButton').on('click', function() {
$('.navmenu').toggleClass('active');
removeClassVar = false;
});
$('.navmenu').on('click', function() {
removeClassVar = false;
});
$('document').on('click', function() {
if (removeClassVar == true) {
$('.navmenu').removeClass('active');
}
removeClassVar = true;
});
});