JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="nav-sub">
<li class="sub-level-0"><a href="#">Menu Item One</a>
<ul>
<li class="sub-level-1"><a href="#">Sub Menu Item One</a></li>
</ul>
</li>
<li class="sub-level-0"><a href="#">Menu Item Two</a>
<ul>
<li class="sub-level-1"><a href="#">Sub Menu Item One</a></li>
<li class="sub-level-1"><a href="#">Sub Menu Item Two</a></li>
</ul>
</li>
</ul>
JavaScript
$(document).ready(function() {
//hide all SUB elements
$(".sub-level-1").hide();
//attach click to top elements only
$("li.sub-level-0").mousedown(function(evt) {
//find the sub element and toggle it..
if(($(evt.target).text().indexOf("Sub"))!=0) {//Bad hack! sry =(
$(this).find("ul .sub-level-1").slideToggle();
}
});
});