JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<div class="submenu">
<ul>
<li>One</li>
</ul>
</div>
<div class="submenu">
<ul>
<li>Two</li>
</ul>
</div>
</ul>
<h1>Page Title</h1>
JavaScript
document.onclick = closeMenu;
function parentIsSubmenu(child) {
var node = child.parentNode;
while (node != null) {
if ((node.className || '').indexOf('submenu') > -1) {
return true;
}
node = node.parentNode;
}
return false;
}
function closeMenu(event) {
if(!parentIsSubmenu(event.target)) {
var submenus = document.getElementsByClassName("submenu");
for(var i = 0; i < submenus.length; i++) {
submenus[i].style.display = 'none';
}
}
}