JSFiddle - React, Tailwind, and code Playground

by crucify

HTML

<ul id="menu">
<li><a href="#">1</a></li>
<li><a href="#sub2" class="menu">2</a>
<ul class="sub-menu" id="sub2">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
</ul> 
</li>
<li><a href="#sub3" class="menu">3</a>
<ul class="sub-menu" id="sub3">
<li><a href="#sub3-1">3.1</a>
<ul class="sub-menu" id="sub3-1">
<li><a href="#">3.1.1</a></li>
</ul></li>
</ul> 
</li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>

CSS

.sub-menu {display:none}

JavaScript

$("#menu .menu").on('click', function() {
	var $self = $(this.hash).slideToggle(),
  	$others = $('.sub-menu').not(this.hash);
  $self.closest('li').find('>ul.sub-menu')
	return false;
});