JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav__menu">
  <li class="main-menu-item">
    <a href="#">Link</a>
    <ul class="sub-menu">
      <li>Stuff</li>
    </ul>
  </li>
  <li class="main-menu-item">
    <a href="#">Link</a>
    <ul class="sub-menu">
      <li>Stuff</li>
    </ul>
  </li>
  <li class="main-menu-item">
    <a href="#">Link</a>
    <ul class="sub-menu">
      <li>Stuff</li>
    </ul>
  </li>
</ul>

CSS

ul {
    list-style-type:  none;
}
.sub-menu {
    display: none
}
.active{
    background: yellow;
}

JavaScript

(function( $ ) {
    'use strict';
    $('#nav__menu li.main-menu-item')
        .attr('tabIndex',-1).attr('aria-haspopup',true)
        .find('ul.sub-menu')
        	.attr('aria-hidden', true).slideUp()
    	.end()
        .on('click', function(e) {
            e.preventDefault();
            $(this)
                .addClass('active')
                .find('ul.sub-menu')
                	.attr('aria-hidden', false).slideDown()
        		.end()
                .siblings()
                	.removeClass('active')
                	.find('ul.sub-menu')
                		.attr('aria-hidden', true).slideUp()
    	});

})( jQuery );