JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav level-1">
	<li><a href="#">Link</a></li>
	<li class="has-submenu"><a href="#">Link</a>
	<ul class="level-2">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul></li>
	<li class="has-submenu"><a href="#">Link</a>
	<ul class="level-2">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li class="has-submenu"><a href="#">Link</a>
		<ul class="level-3">
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul></li>
	</ul></li>
	<li class="has-submenu"><a href="#">Link</a>
	<ul class="level-2">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul></li>
</ul>

CSS

a {
    display:block;
    background:#aaa;
    border:1px solid #ccc;
    padding:5px;
    color:#fff;
}
li li {
    display:none;
}
.has-submenu > a:after {
 content:' + ';
}
.has-submenu .nav-open:after {
 content:' - ';
}
li li a {
   padding-left:40px;
    background:#888;
}
li li li a {
   padding-left:80px;
    background:#333;
}

JavaScript

$('.has-submenu > a').on('click', function(e){

    e.preventDefault();
				
    $(this).next('ul').find('> li').slideToggle();

    // If it's a level one link & there's other open links...
    if($(this).parent("li").parent("ul").hasClass("level-1") && $(".level-1 > li > a").hasClass("nav-open")) {
        //... collapse the top level open link.
        $(".level-1 > li > a.nav-open").next('ul').find('> ').slideToggle();
        $(".level-1 > li > a.nav-open").removeClass("nav-open");
    }
	
    $(this).toggleClass('nav-open');
});