JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#" id="link-18">level 1 one</a>
          <ul>
              <li><a href="#" id="link-23">sublevel 1 one</a></li>
              <li><a href="#" id="link-24">sublevel 2 two</a></li>
              <li><a href="#" id="link-26">sublevel 3 three</a></li>
              <li><a href="#" id="link-27">sublevel 4 four</a></li>
              <li><a href="#" id="link-28">sublevel 5 five</a></li>
              <li><a href="#" id="link-29">sublevel 6 six</a></li>
          </ul>
        </li>
        <li><a href="#" id="link-19">level 2 two</a>
          <ul>
              <li><a href="#" id="link-23">sublevel 1 one</a></li>
              <li><a href="#" id="link-24">sublevel 2 two</a></li>
              <li><a href="#" id="link-26">sublevel 3 three</a></li>
              <li><a href="#" id="link-27">sublevel 4 four</a></li>
              <li><a href="#" id="link-28">sublevel 5 five</a></li>
              <li><a href="#" id="link-29">sublevel 6 six</a></li>
          </ul>
        </li>
        <li><a href="#" id="link-20">level 3 three</a>
          <ul>
              <li><a href="#" id="link-23">sublevel 1 one</a></li>
              <li><a href="#" id="link-24">sublevel 2 two</a></li>
              <li><a href="#" id="link-26">sublevel 3 three</a></li>
              <li><a href="#" id="link-27">sublevel 4 four</a></li>
              <li><a href="#" id="link-28">sublevel 5 five</a></li>
              <li><a href="#" id="link-29">sublevel 6 six</a></li>
          </ul>
        </li>
        <li><a href="#" id="link-21">level 4 four</a></li>
        <li><a href="#" id="link-22">level 5 five</a></li>
    </ul>
</nav>

CSS

nav ul>li>ul {
    display: none;
    float: left;
}

nav ul>li {
    
}

nav ul {
    
}

JavaScript

$('nav a').on('click', function(e) {
    e.preventDefault();
    if ($(this).parent().children('ul').size() > 0) { 
        $(this).parent().children('ul').toggle();
    }
});