JSFiddle - React, Tailwind, and code Playground
by Dipak1991
HTML
<ul id="menu">
<li class="toggle active"> <a href="#">
<span class="sidebar-nav-item-icon fa fa-github fa-lg"></span>
<span class="sidebar-nav-item">metisMenu</span>
<span class="fa arrow"></span>
</a>
<ul class="submenu">
<li> <a href="https://github.com/onokumus/metisMenu">
<span class="sidebar-nav-item-icon fa fa-code-fork"></span>
Fork
</a>
</li>
<li> <a href="https://github.com/onokumus/metisMenu">
<span class="sidebar-nav-item-icon fa fa-star"></span>
Star
</a>
</li>
<li> <a href="https://github.com/onokumus/metisMenu/issues">
<span class="sidebar-nav-item-icon fa fa-exclamation-triangle"></span>
Issues
</a>
</li>
</ul>
</li>
<li class="toggle"> <a href="#">Menu 1 <span class="glyphicon arrow"></span></a>
<ul class="submenu">
<li><a href="#">item 1.1</a>
</li>
<li><a href="#">item 1.2</a>
</li>
<li class="toggle"> <a href="#">Menu 1.3 <span class="fa plus-times"></span>
</a>
<ul class="submenu">
<li><a href="#">item 1.3.1</a>
</li>
<li><a href="#">item 1.3.2</a>
</li>
<li><a href="#">item 1.3.3</a>
</li>
<li><a href="#">item 1.3.4</a>
</li>
</ul>
</li>
<li><a href="#">item 1.4</a>
</li>
</ul>
</li>
</ul>
CSS
.submenu {
display: none;
}
.open {
display: block;
}
JavaScript
$(document).on("click", "#menu .toggle", function (e) {
console.log(e.target);
e.preventDefault();
e.stopPropagation()
$(this).find(".submenu").first().toggleClass("open");
});