JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mainNavigation">
    <li>
        <a href="#">Main 1</a>
        <ul class="submenu">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Main 2</a>
        <ul class="submenu">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>
</ul>

CSS

.submenu{
  display:none;
}

JavaScript

function openMenu(){
  if($(this).attr("data-c")){
    $(this).removeAttr("data-c");
    $(this).siblings(".submenu").hide();
  }
  else{
    $(this).attr("data-c", 1);  
    $(this).siblings(".submenu").show();
  }
}
$("#mainNavigation li a").click(openMenu);