JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
<li><a href="#">1</a></li>
<li>2
<ul class="sub-menu">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
</ul> 
</li>
<li>3
<ul class="sub-menu">
<li><a href="#">3.1</a></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 li").not($('#menu li sub-menu li a')).click(function () {
    $('ul.sub-menu').not( $(this).children() ).slideUp();
    $(this).children("ul.sub-menu").slideToggle();
});