JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="menu-item">
    <a href="#">level 1.1</a>
    <ul class="sub-menu">
      <li class="menu-item">
        <a href="#">level 2.1</a>
        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">level 3.1</a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">level 4.1</a></li>
              <li class="menu-item"><a href="#">level 4.2</a></li>
            </ul>
          </li>
          <li class="menu-item"><a href="#">level 3.2</a></li>
        </ul>
      </li>
      <li class="menu-item"><a href="#">level 2.2</a></li>
    </ul>
  </li>
  <li class="menu-item"><a href="#">level 1.2</a></li>
  <li class="menu-item"><a href="#">level 1.3</a></li>
</ul>

CSS

.sub-menu {
  display: none;
}
.sub-menu.open {
  display: block;
}

JavaScript

$(".menu-item").on('click', '>a', function(e) {
  var $subMenu = $(this).siblings('.sub-menu');
  if ($subMenu.length > 0){
    e.preventDefault();
    $subMenu.toggleClass('open');
  }
})