JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li>
      <a>PARENT</a>
      <ul>
        <li>
          <a href="#">CHILD 1</a>
        </li>
        <li>
          <a href="#">CHILD 2</a>
        </li>
        <li>
          <a href="#">CHILD 3</a>
        </li>
      </ul>
    </li>
  </ul>

SCSS

nav li:not(.on) li {
  display: none;
}

JavaScript

var $level1 =$('nav').children('ul').children('li');
  $level1.click(function() {
    if ($(this).hasClass('on')) {
      $(this).removeClass('on');
    } else {
      $level1.filter('.on').removeClass('on');
      $(this).addClass('on');
    }
  });