JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><a href="#">Первый уровень</a>
    <ul>
      <li><a href="#">Второй уровень</a>
        <ul>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a href="#">четвертый уровень</a></li>
            </ul>
          </li>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a href="#">четвертый уровень</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Второй уровень</a>
        <ul>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a href="#">четвертый уровень</a></li>
            </ul>
          </li>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a href="#">четвертый уровень</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Второй уровень</a>
        <ul>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a href="#">четвертый уровень</a></li>
            </ul>
          </li>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a href="#">четвертый уровень</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Первый уровень</a>
    <ul>
      <li><a href="#">Второй уровень</a>
        <ul>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a href="#">четвертый уровень</a></li>
            </ul>
          </li>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a href="#">четвертый уровень</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Второй уровень</a>
        <ul>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a href="#">четвертый уровень</a></li>
            </ul>
          </li>
          <li><a href="#">Третий уровень</a>
            <ul>
              <li><li><a...

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 10px;
}
ul a { display: block; padding: 5px; }
ul>li.active>a { background: #999; }
ul ul { display: none; }

JavaScript

$(document).ready(function(){
    $('ul a').click(function(e){
    	$('ul li').removeClass('active');
    	$(this).parent('li').addClass('active').children('ul').slideDown();
      $(this).parent('li').siblings('li').children('ul').slideUp();
      e.preventDefault();
    });
});